selettore css3: not() per testare la classe genitore

Question

Ho un elenco non ordinato, utilizzando il plug-in "tabs" di avvio. Il codice è simile al seguente:

<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> 

Mi piacerebbe usare CSS3 per modificare il colore di tutti i collegamenti <a> il cui genitore <li> non ha la classe .active.

Ho provato qualcosa di simile:

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

ma senza alcun risultato. C'è un modo per farlo o sto abbaiando dall'albero sbagliato?

Answer 1

Combinatori come >, + e spazio per discendente non sono consentiti in :not() in CSS; sono ammessi solo come selettore jQuery. Puoi scoprire di più su this other question.

Detto questo, è possibile utilizzare :not() su li da solo e spostare la parte > a; tuttavia questo dipenderà dalla struttura dei vostri ul e li elementi:

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

Ad esempio, si può sempre concatenare altri selettori, come ad esempio .span3 se si vuole limitare a a elementi con li i genitori di quella classe solo :

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

tenere a mente, però, che si può fare affidamento solo su utilizzando :not() in questo modo, se si ha il controllo sul markup o la struttura è almeno prevedibile (ad esempio, si sa che tipo di elementi i genitori sono). Nel tuo caso, ad esempio, stai solo guardando li.span3 > a e applicando gli stili solo quando lo li.span3 non ha la classe attiva. Con queste informazioni è possibile costruire un selettore come uno dei precedenti, che dovrebbe funzionare come previsto.