Pseudo classi strutturali

Le pseudo classi permettono di differenziare un oggetto sulla base del suo stato, come :hover, :visited e :active, vale a dire su informazioni che non fanno parte della struttura ad albero del documento.

Structural pseudo-classes

• E:first-child { ... style ...}

CSS3 structural pseudo-classes

Qui n rappresenta la sequenza del elemento corrente, inizia con 0 e va avanti di 1. Degli  asterischi parleremo più in basso.

• E:nth-*(n) { ... style ...} - tutti gli elementi di tipo E saranno selezionati
• E:nth-*(2n) { ... style ...} - saranno selezionati il secondo, quarto ... elemento di tipo E
• E:nth-*(3n) { ... style ...} - saranno selezionai il terzo, sesto, nono ... element di tipo E
• E:nth-*(n+2) { ... style ... } - tutti gli elmenti di di tipo E tranne il primo

L'espressione tra parentesi è considerata valida, e di conseguenza l'elemento E corrispondente al risultato verrà selezionato, se è positiva ( > 0 ) e il numero risultante esiste in lista. L'espressione viene valutata una volta per ogni elemento in lista: per esempio l'espressione (n+2) sul primo elemento, selezionerà il secondo e così via. Attenzione: le posizioni degli elementi iniziano con 1! La sequenza N degli elementi inizia con 0! (n) significa tutti gli elmenti.

Per le posizioni pari e dispati si usano rispettivamente 2n e 2n+1.

E gli asterischi? I valori possibili sono:

• E:nth-child - la posizione dell' elemento sarà basata sulla sua posizione nel conto totale dei figli del suo elemento padre, a prescindere dal loro tipo
• E:nth-of-type -la posizione dell' elemento sarà basata sulla sua posizione nel conto totale dei figli di tipo E del suo elemento padre
• E:nth-last-child - come E:nth-child ma partendo dal fondo
• E:nth-last-of-type - come E:nth-of-type ma partendo dal fondo
• E:first-of-type
• E:last-child
• E:last-of-type