Maggiore controllo sulle selezioni :nth-child() con la sintassi of S

Prefiltra un insieme di elementi secondari prima di applicarvi la logica An+B.

I selettori di pseudo-classe :nth-child() e :nth-last-child()

Con il selettore di pseudo-classi :nth-child() è possibile selezionare gli elementi nel DOM in base al relativo indice. Con la microsintassi An+B hai un controllo preciso sugli elementi da selezionare.

• :nth-child(2): seleziona il secondo figlio.
• :nth-child(2n): seleziona tutti i figli, (2°, 4°, 6°, 8° e così via).
• :nth-child(2n+1): seleziona tutti i figli dispari (1°, 3°, 5°, 7° e così via).
• :nth-child(5n+1): seleziona il primo (=(5×0)+1), il sesto (=(5×1)+1), l'undicesimo (=(5×2)+1), ... elemento secondario.
• :nth-child(5n+2): seleziona il 2° (=(5×0)+2), 7° (=(5×1)+2), 12° (=(5×2)+2), ... elemento secondario.

Tuttavia, se ometti il parametro A, puoi effettuare più selezioni di creatività. Ad esempio:

• :nth-child(n+3): seleziona tutti i bambini dal 3° in su (3°, 4°, 5° e così via).
• :nth-child(-n+5): seleziona tutti i bambini fino al quinto posto (1°, 2°, 3°, 4°, 5°).

Combina alcune di queste :nth-child() selezioni e puoi selezionare intervalli di elementi:

• :nth-child(n+3):nth-child(-n+5): seleziona tutti i bambini dal 3° al 5° (3°, 4°, 5°).

Con :nth-last-child() puoi effettuare selezioni simili, ma invece di iniziare a contare dall'inizio, inizi a contare dalla fine.

Pre-filtro delle selezioni con la sintassi of S

Una novità del livello 4 dei selettori CSS è la possibilità di passare facoltativamente un elenco di selettori a :nth-child() e :nth-last-child().

:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)

Quando of S è specificato, la logica An+B viene applicata solo agli elementi che corrispondono all'elenco di selettori S specificato. Ciò significa in sostanza che puoi prefiltrare i bambini prima che An+B faccia il suo lavoro.

Esempi

Ad esempio, :nth-child(2 of .highlight) seleziona il secondo elemento corrispondente che ha la classe .highlight. In altre parole, tra tutti i bambini del corso .highlight, seleziona il secondo.

A differenza di .highlight:nth-child(2), che seleziona l'elemento che ha la classe .highlight e è anche il secondo elemento secondario.

Nella demo qui sotto puoi vedere questa differenza:

• L'elemento che corrisponde a :nth-child(2 of .highlight) ha un contorno rosa.
• L'elemento che corrisponde a .highlight:nth-child(2) ha un contorno verde.

Tieni presente che S è un elenco di selettori, il che significa che accetta più selettori separati da una virgola. Ad esempio, :nth-child(4 of .highlight, .sale) seleziona il quarto elemento, che è .highlight o .sale da un insieme di elementi di pari livello.

Nella demo seguente, all'elemento che corrisponde a :nth-child(4 of .highlight, .sale) è applicato un contorno arancione.

A righe a righe, rivisitato

Un esempio classico in cui viene utilizzato :nth-child() è la creazione di una tabella con righe zebrate. È una tecnica visiva in cui ogni riga della tabella alterna colori. Normalmente, il problema viene affrontato nel seguente modo:

tr:nth-child(even) {
  background-color: lightgrey;
}

Sebbene questo metodo funzioni correttamente per le tabelle statiche, diventa problematico quando si inizia a filtrare dinamicamente i contenuti della tabella. Ad esempio, quando la riga due viene nascosta, vengono visualizzate le righe 1 e 3, ciascuna con lo stesso colore di sfondo.

Per risolvere il problema, possiamo utilizzare :nth-child(An+B [of S]?) escludendo le righe nascoste dalla logica An+B:

tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}

Non male, vero?

Foto di Markus Spiske su Unsplash