Pseudo-klassen nth-child

Pseudo-klassen nth-child velger et element, som er det n-te barnet til forelderen.

Syntaks

cssvelger:nth-child(tall | odd | even | uttrykk) {
  
}

Verdier

Verdi	Beskrivelse
tall	Et positivt tall starter fra `1`. Angir nummeret på elementet vi ønsker å adressere. Nummereringen av elementer starter fra `1`.
`odd`	Odde elementer.
`even`	Partall elementer.
uttrykk	Man kan sette sammen spesielle uttrykk med bokstaven n, som representerer alle heltall fra null (ikke fra en) til uendelig. Så, `2n` betyr alle partall (med start fra det andre). Hvordan forstå dette? Vi setter inn i `n` sekvensielt tall fra `0` og så videre: hvis n = 0, gir 2n 0 - det finnes ikke noe slikt element (elementnummerering starter fra 1), hvis n = 1, gir 2n 2 - det andre elementet, hvis n = 2, gir 2n 4 - det fjerde elementet. Hvis man skriver 3n - vil dette være hvert tredje element (med start fra det tredje), og så videre.

Eksempel

I dette eksempelet vil vi gjøre rød farge på den li som er det 4-te barnet til sin forelder:

html<ul>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
</ul>

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

Результат:

Eksempel

Nå vil vi gjøre alle partall li røde:

html<ul>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
</ul>

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

Результат:

Eksempel

Nå vil vi gjøre alle odde li røde:

html<ul>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
</ul>

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

Результат:

Eksempel

Nå vil vi gjøre hver tredje li rød (med start fra den tredje):

html<ul>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
</ul>

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

Результат:

Eksempel

I velgeren kan man spesifisere et område av elementer. Anta at du har en liste med 20 elementer og må velge elementer fra 7 til 14 inklusive. Dette kan gjøres slik:

html<ol>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
  <li>listeelement</li>
</ol>

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

Результат: