css3 :non() sélecteur de test de classe du parent

J'ai une liste non ordonnée, à l'aide de bootstraps "onglets" plugin. 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 ceci:

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

mais en vain. Est-il possible de faire ceci ou suis-je fausse route?

  • Actuellement, le CSS n'a pas de "parent" seletor (bien que CSS4 va évidemment avoir cette capacité), de sorte que vous voudrez peut-être chercher une autre solution
  • Eh bien, c'est juste ennuyeux! Je suppose que je peux il suffit d'appliquer un style particulier à li.active>a que des remplacements réguliers a style, mais je préfère si je pouvais trouver le parent. Oh bien!
  • Pilules: Le code ici n'est pas en essayant de sélectionner le parent, c'est d'essayer de sélectionner un enfant sur la base de quelque chose de la mère correspond à (ou ne correspond pas). Cela ne peut pas être résolu avec un parent sélecteur.
  • je ne suis pas sûr, mais je pense que sizzlejs vous permet de sélectionner les parents par un supplément de pseduo classe :has()
InformationsquelleAutor JVG | 2013-01-10
  1. 44

    Combinators comme >, + et de l'espace pour les descendants ne sont pas autorisés à l'intérieur de :not() en CSS; ils sont seulement autorisés comme un sélecteur jQuery. Vous pouvez en savoir plus en cette autre question.

    Cela dit, vous pouvez être en mesure d'utiliser :not() sur le li seul, et de sortir de la > a partie; cependant, cela dépendra de la structure de votre ul et li éléments:

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

    Par exemple, vous pouvez toujours en chaîne d'autres sélecteurs, comme .span3 si vous souhaitez limiter à a éléments avec li les parents de cette classe seulement:

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

    Gardez à l'esprit, cependant, que vous ne pouvez compter que sur l'aide de :not() de cette manière si vous avez le contrôle sur le balisage ou de la structure est au moins prévisibles (par exemple, vous savez ce genre d'éléments dont les parents sont). Dans votre cas, par exemple, vous êtes seulement à la recherche à li.span3 > a, et l'application de styles que lorsque le li.span3 n'a pas la classe active. Avec cette information, vous pouvez construire un sélecteur comme l'un des ci-dessus, qui devrait fonctionner comme prévu.

    InformationsquelleAutor BoltClock