`:nth-of-type(), :nth-last-child() și :nth-child(An+B of S)` în CSS

Selectori și reguli de bază CSS3+ (sintaxa „of S”: Chrome 111, Firefox 113, Safari 9)

Variantele lui :nth-child(): numără doar elementele de același tip, numără de la final sau numără doar elementele care au o anumită clasă.

Sintaxă CSS

p:nth-of-type(2) { ... }          /* al doilea paragraf */
li:nth-last-child(-n + 3) { ... } /* ultimele 3 elemente */
li:only-child { ... }             /* singurul copil */
li:nth-child(odd of .vizibil) { ... }

Ce face `:nth-of-type(), :nth-last-child() și :nth-child(An+B of S)`

:nth-child() numără toți copiii unui părinte, indiferent de tag. Variantele lui rezolvă situațiile în care acest lucru nu ajunge:
• :nth-of-type(n) numără doar frații cu același tag (de exemplu doar paragrafele, ignorând imaginile dintre ele).
• :nth-last-child(n) și :nth-last-of-type(n) numără de la ultimul element spre primul.
• :first-of-type, :last-of-type, :only-child, :only-of-type sunt scurtături pentru cazurile frecvente.

Toate acceptă formula An+B: 2n sau even (pare), 2n+1 sau odd (impare), 3n (fiecare al treilea), n+4 (de la al patrulea încolo), -n+3 (primele trei).

Sintaxa :nth-child(An+B of S) numără doar copiii care se potrivesc cu selectorul S. Este utilă la tabelele filtrate: dacă ascunzi unele rânduri cu o clasă, :nth-child(odd of .vizibil) păstrează alternanța corectă a culorilor doar printre rândurile afișate.

Valori uzuale

Valoare	Descriere
`:nth-of-type(An+B)`	Al n-lea element de același tip printre frații săi.
`:nth-last-child(An+B)`	Al n-lea copil, numărând de la sfârșit.
`:nth-last-of-type(An+B)`	Al n-lea element de același tip, numărând de la sfârșit.
`:first-of-type / :last-of-type`	Primul / ultimul element de acel tip din părinte.
`:only-child`	Elementul care este singurul copil al părintelui.
`:nth-child(An+B of S)`	Numără doar copiii care se potrivesc cu selectorul S.

Exemple

Exemplul 1: Litera mare doar la primul paragraf, chiar dacă articolul începe cu o imagine

p:first-child nu ar funcționa aici, pentru că primul copil al articolului este o imagine.

/* Structura: <article> <img> <p> <p> <p> </article> */
.articol p:first-of-type::first-letter {
  float: left;
  font-size: 3em;
  line-height: 1;
  margin-right: 6px;
  color: #b45309;
}

/* Ultimele 2 paragrafe, mai mici (note de subsol) */
.articol p:nth-last-of-type(-n + 2) {
  font-size: 0.875rem;
  color: #64748b;
}

Efect vizual în browser

În articolul despre Cluj, primul paragraf de după fotografie începe cu un „C” mare, maro, pe trei rânduri. Ultimele două paragrafe apar cu text mai mic și gri, ca note de final.

Exemplul 2: Rânduri alternante corecte într-un tabel filtrat

Rândurile ascunse nu mai strică alternanța, pentru că se numără doar rândurile cu clasa .vizibil.

tr.ascuns {
  display: none;
}

tbody tr:nth-child(even of .vizibil) {
  background-color: #f1f5f9;
}