CSS nth-of-type in tutta la pagina?

Question

Mi sembra che l'nth-of-type funzioni solo all'interno dello stesso elemento genitore. C'è un modo per farlo funzionare su tutta la pagina?

La mia situazione: vorrei scorrere attraverso cinque colori hover per i collegamenti. Questi collegamenti sono sparsi in molti paragrafi. Poiché ci sono solo uno o due collegamenti per paragrafo, la prima coppia di colori hover è sproporzionata.

Grazie!

Answer 1

nth-of-type controlla sempre l'indice dell'elemento relativo al suo genitore diretto: (w3schools), quindi non funzionerà su tutta la pagina.

La cosa migliore è quella di implementare questo comportamento con javascript, ecco una demo veloce utilizzando jQuery: jsfiddle

var styles = ["first", "second", "third"]; 
var index = 0; 
$("body").find("a").each(function() { 
    $(this).addClass(styles[index++]); 
    if (index >= styles.length) index = 0; 
});