Est-il un CSS sélecteur parent?

Question

J'aimerais sélectionnez l' <li> élément qui est un parent (qui précède immédiatement la balise d'ancrage, si ça peut aider...) en fonction de certains attributs de la balise d'ancrage.

c'est à dire mon CSS serait quelque chose comme ceci:

li < a.active {
    property: value;
}

Évidemment, il ya des façons de le faire avec du JavaScript mais je suis en espérant qu'il y est une sorte de solution de contournement existe natif de CSS 2

Des idées?

[Edit:] Le menu que je suis en train de style est vomie par un cms donc je ne peux pas déplacer le tag actif de l'élément li... (à moins que je thème, le menu de création de module, je préfère ne pas le faire)

Answer 1

Il n'existe actuellement aucun moyen de sélectionner le parent d'un élément en CSS.

Si il y avait un moyen de le faire, il serait dans les sélecteurs CSS spécifications, CSS 2 ou 3

• CSS 3 Sélecteurs Spec
• CSS 2 Sélecteurs de Spec

En attendant, vous aurez recours à JavaScript si vous avez besoin de sélectionner un élément parent.

---

Les Sélecteurs CSS 4, document de Travail comprend un :has() de la pseudo-classe qui fonctionne de la même que le jQuery de mise en œuvre. À compter de la mi-2014, ce n'est pas disponible dans n'importe quel navigateur.

À l'aide de CSS4 sélecteurs, la question pourrait être résolu avec ceci:

li:has(> a.active) { /* styles to apply to the li tag */ }

Answer 2

Je ne pense pas que vous pouvez sélectionner le parent en css uniquement.

Mais comme vous avez déjà semblent avoir un .active classe, wouldnt être plus facile de déplacer cette classe à l' li (au lieu de l' a)? De cette façon, vous pouvez accéder à la fois à l' li et de la a via css.

Answer 3

Vous pouvez utiliser ce script.

*! > input[type=text] { background: #000; }

Cela permet de sélectionner n'importe quel parent d'un texte d'entrée. Mais attendez, il ya encore beaucoup plus. Si vous le souhaitez, vous pouvez sélectionner un parent spécifié:

.input-wrap! > input[type=text] { background: #000; }

ou sélectionnez-la lorsqu'elle est active:

.input-wrap! > input[type=text]:focus { background: #000; }

Découvrez ce code HTML:

<div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>

vous pouvez sélectionner qu' span.help lorsque l' input est actif et le montrer:

.input-wrap! .help > input[type=text]:focus { display: block; }

Il y a beaucoup plus de fonctionnalités; il suffit de consulter la documentation du plugin.

BTW, il fonctionne sous IE.

Answer 4

Comme mentionné par un couple de d'autres, il n'y a pas un moyen de style d'un élément parent/s en utilisant juste le CSS mais le suivant fonctionne avec jQuery:

$("a.active").parents('li').css("property", "value");

Answer 5

Le sélecteur de css3 "Grand frère combinator" pourrait peut-être utilisé pour ce que vous voulez:

E ~ F {
    property: value;
}

Cela correspond à tout élément F qui est précédée par un E élément.