Associare nth-of-type con negazione

Le nuove pseudo classi nth, gia introdotte da Stefano in questo post, sono nuove pseudo classi che utilizzano valori numerici per rilevare la posizione di un elemento nell'alberatura del documento.
Associare nth-of-type con negazione

Tutto parte da Eric Meyer

Giorni fa ho letto questo articolo di Eric Meyer in cui fa delle osservazioni interessanti sulla pseudo-classe negazione – not – associata a quella strutturale nth-of-type. Il grande Eric sperimenta proprio di tutto 🙂

Ecco cosa ha notato:

Le due dichiarazioni css sono praticamente identiche, non importa in che modo le si scrive. In entrambi i casi il selettore selezionerà le voci dispari escluse quelle con classe skip. Quindi verranno evidenziate 1-3-5-7-11. Fin qui tutto normale.

<ol>
    <li>lorem ipsum<li>
    <li>lorem ipsum<li>
    <li>lorem ipsum<li>
    <li class="skip">lorem ipsum<li>
    <li>lorem ipsum<li>
    <li>lorem ipsum<li>
    <li>lorem ipsum<li>
    <li>lorem ipsum<li>
    <li class="skip">lorem ipsum<li>
    <li>lorem ipsum<li>
    <li>lorem ipsum<li>
</ol>
li:not(.skip):nth-of-type(odd) {font-style: italic; color: red;}
ol li:nth-of-type(odd):not(.skip) {background:silver;}

Se aggiungiamo anche questo?

A rollout la pseudo classe con negazione non filtra la lista in modo appropriato. Ci ritroviamo con le voci 4 e 9 evidenziate bensì dovrebbero essere escluse perchè associate alla classe skip.

ol li.skip{display:none}
ol:hover li.skip{display:list-item;}

Conclusioni

Dovrebbe esserci in atto una proposta css4 che potrebbe risolvere un evento di questo tipo, ma naturalmente è per il futuro :). Quindi se ci troviamo in una situazione del genere non ci resta che ovviare con uno script.

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github