Come applicare gli stili pari/dispari agli elementi tenendo conto delle classi escluse?

Question

Come applicare uno stile css specifico a ogni elemento dispari (per argomento) in un insieme di elementi, tenendo conto di un insieme di elementi esclusi?

Il problema viene replicato qui (mostrato in una codepen):

http://codepen.io/houdmont/pen/VLOBBG

Una serie di elementi che hanno una classe .foo applicato:

<a href="#" class="foo">1. Blue</a> 
<a href="#" class="foo">2. Green</a> 
<a href="#" class="foo">3. Blue</a> 
<a href="#" class="foo bar">4. Hidden (blue)</a> 
<a href="#" class="foo bar">5. Hidden (blue)</a> 
<a href="#" class="foo bar">6. Hidden (blue)</a> 
<a href="#" class="foo">7. Green</a> 

Quando viene applicata la classe .bar, l'elemento è nascosto.

Mi piacerebbe che lo rimanente elementi con .foo applicato per essere stile pari/dispari.

tentativo come segue:

.bar { 
    display: none; 
} 

/** 
* This clearly doesn't work as I'd hoped it would. 
*/ 
.foo:not(.bar):nth-of-type(even) { 
    color: green; 
} 

Idealmente, vorrei il settimo elemento per essere verde, anche se è un elemento "dispari", se fossi in grado di escludere gli elementi con class .bar allora sarebbe il quarto elemento e quindi considerato "pari", impostando il colore su verde.

Ciò è possibile con i CSS?

Answer 1

Purtroppo non possibile. In precedenza ha risposto qui: https://stackoverflow.com/a/12205844/1590962

CSS è completamente dichiarativo; ogni selettore è una condizione semplice che è vera o falsa indipendentemente da qualsiasi parte del selettore. Non è un linguaggio procedurale in cui prendi un set e lo elabori, restringendolo ad ogni passo. Un linguaggio di selezione con regole procedurali sarebbe immune da molti tipi di ottimizzazione e sarebbe più lento.

Quindi nth-of-type riguarda solo la posizione all'interno di un elemento padre e non la posizione in un 'elenco di risultati finora' perché i selettori CSS non hanno tale concetto. Un motore di selezione potrebbe cercare il test per l'ennesimo tipo prima di restringerlo, poiché le regole non interferiscono tra loro.

Answer 2

Come diceva Hephistocles, non c'è modo di farlo con solo css. D'altra parte, con javascript è molto semplice:

var list = document.getElementsByClassName('foo'); 
var x=0; 
for(i=0;i<list.length; i++){ 
    if(x%2==1) list[i].style.color='green'; 
    if(list[i].className.indexOf("bar")==-1) x++; 
}