nth-child pszeudoklasszis

Az nth-child pszeudoklasszis kiválaszt egy elemet, amely a szülő n-edik gyermeke.

Szintaxis

cssszelektor:nth-child(szám | odd | even | kifejezés) {
  
}

Értékek

Érték	Leírás
szám	Pozitív szám `1`-től kezdve. Meghatározza annak az elemnek a sorszámát, amelyhez címezni akarunk. Az elemek számozása `1`-től kezdődik.
`odd`	Páratlan elemek.
`even`	Páros elemek.
kifejezés	Készíthetünk speciális kifejezéseket n betűvel, ami minden egész számot jelöl nullától (nem egyettől) a végtelenig. Így a `2n` minden páros sorszámot jelent (a másodiktól kezdve). Hogyan értsük ezt? Helyettesítsük be a `n` helyére egymás után a számokat `0`-tól kezdve és így tovább: ha n = 0, akkor 2n 0-t ad - ilyen elem nincs (az elemek számozása 1-től indul), ha n = 1, akkor 2n 2-t ad - a második elem, ha n = 2, 2n 4-et ad - a negyedik elem. Ha 3n-t írunk - ez minden harmadik elemet jelenti (a harmadiktól kezdve), és így tovább.

Példa

Ebben a példában piros színűre tesszük azt a li elemet, amely a szülőjének a 4-edik gyermeke:

html<ul>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
</ul>

cssli:nth-child(4) {
  color: red;
}

Результат:

Példa

Most minden páros li elemet pirosra változtatunk:

html<ul>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
</ul>

cssli:nth-child(even) {
  color: red;
}

Результат:

Példa

Most minden páratlan li elemet pirosra változtatunk:

html<ul>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
</ul>

cssli:nth-child(odd) {
  color: red;
}

Результат:

Példa

Most minden harmadik li elemet pirosra változtatjuk (a harmadiktól kezdve):

html<ul>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
</ul>

cssli:nth-child(3n) {
  color: red;
}

Результат:

Példa

A szelektorban megadhatunk elemtartományt. Tegyük fel, van egy 20 elemű listája, és ki kell választania a 7-től a 14-ig terjedő elemeket (az utóbbit is beleértve). Ezt megteheti így:

html<ol>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
</ol>

cssli:nth-child(n+7):nth-child(-n+14) {
  color: red;
}

Результат: