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

Pre-filtra un insieme di elementi secondari prima di applicare la logica An+B.

Bramus

Gli pseudoselettori di classe :nth-child() e :nth-last-child()

Con il selettore di pseudo-classe :nth-child() è possibile selezionare gli elementi nel DOM in base al loro indice. Utilizzando la microsintassi An+B, puoi controllare con precisione gli elementi che vuoi selezionare.

• :nth-child(2): seleziona il secondo bambino.
• :nth-child(2n): seleziona tutti i figli pari (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 1°, (=(5×0)+1), il 6° (=(5×1)+1), l'11° (=(5×2)+1) e così via.
• :nth-child(5n+2): seleziona il secondo (=(5×0)+2), il settimo (=(5×1)+2), il dodicesimo (=(5×2)+2) e così via.

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

• :nth-child(n+3): seleziona tutti i figli a partire dal terzo (terzo, quarto, quinto e così via).
• :nth-child(-n+5): seleziona tutti i figli fino al quinto (1°, 2°, 3°, 4°, 5°).

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

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

Utilizzando :nth-last-child() puoi effettuare selezioni simili, ma anziché iniziare a contare dall'inizio, inizi a contare dalla fine.

Selezioni di pre-filtraggio con la sintassi of S

La novità dei selettori CSS di livello 4 è la possibilità di trasmettere 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 viene specificato of S, la logica An+B viene applicata solo agli elementi che corrispondono all'elenco di selettori specificato S. Ciò significa essenzialmente che puoi prefiltrare i figli prima che An+B faccia il suo lavoro.

Esempi

Ad esempio, :nth-child(2 of .highlight) seleziona il secondo elemento corrispondente con la classe .highlight. In altre parole, tra tutti i figli con la classe .highlight, seleziona il secondo.

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

Nella demo riportata di seguito 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 riportata di seguito, l'elemento che corrisponde a :nth-child(4 of .highlight, .sale) ha un contorno arancione.

Zebra-striping, rivisitato

Un esempio classico in cui viene utilizzato :nth-child() è la creazione di una tabella a righe alternate. È una tecnica visiva in cui i colori di ogni riga della tabella si alternano. Normalmente, questo problema viene affrontato nel seguente modo:

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

Sebbene questo approccio funzioni bene per le tabelle statiche, diventa problematico quando inizi a filtrare dinamicamente i contenuti della tabella. Ad esempio, se la riga 2 viene nascosta, le righe 1 e 3 saranno visibili, ognuna con lo stesso colore di sfondo.

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

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

Non male, vero?

Foto di Markus Spiske su Unsplash