web-dev-qa-db-fra.com

css3: sélecteur not () pour tester la classe du parent

J'ai une liste non ordonnée, en utilisant le plugin "tabs" de bootstraps. Le code ressemble à ceci:

<ul>
  <li class="active span3"><a href="#ourAgency" data-toggle="tab"><i class="icon-building icon-3x"></i>Our Agency</a></li>
  <li class="span3"><a href="#studentVisas" data-toggle="tab"><i class="icon-laptop icon-3x"></i>Student Visas</a></li>
  <li class="span3"><a href="#workVisas" data-toggle="tab"><i class="icon-suitcase icon-3x"></i>Work Visas</a></li>
  <li class="span3"><a href="#accreditation" data-toggle="tab"><i class="icon-legal icon-3x"></i>Accreditation</a></li>
</ul>

Je voudrais utiliser CSS3 pour changer la couleur de tous les <a> liens dont le parent <li> N'A PAS la classe .active.

J'ai essayé quelque chose comme ça:

 a:not(li.active>a){
    color:grey;
}

mais en vain. Y a-t-il un moyen de le faire ou aboie-je le mauvais arbre?

csscss3css-selectors
36
JVG

Les combinateurs tels que >, + Et l'espace pour les descendants ne sont pas autorisés dans :not() en CSS; ils ne sont autorisés qu'en tant que sélecteur jQuery. Vous pouvez en savoir plus dans cette autre question .

Cela dit, vous pourrez peut-être utiliser :not() sur la seule li et sortir de la partie > a; cependant cela dépendra de la structure de vos éléments ul et li:

li:not(.active) > a {
    color: grey;
}

Par exemple, vous pouvez toujours chaîner d'autres sélecteurs, tels que .span3 Si vous souhaitez le limiter à a éléments avec li parents de cette classe uniquement:

li.span3:not(.active) > a {
    color: grey;
}

Gardez à l'esprit, cependant, que vous ne pouvez compter sur l'utilisation de :not() de cette manière que si vous avez le contrôle sur le balisage ou que la structure est au moins prévisible (par exemple, vous savez de quel type d'éléments les parents sont). Dans votre cas, par exemple, vous ne regardez que li.span3 > a Et n'appliquez des styles que lorsque li.span3 N'a pas la classe active. Avec ces informations, vous pouvez construire un sélecteur comme l'un des précédents, qui devrait fonctionner comme prévu.

43
BoltClock