Pseudo-klassen nth-of-type

Pseudo-klassen nth-of-type väljer ett element, som är det n:te barnet av given typ.

Det vill säga, om jag skriver h2:nth-of-type(4) - kommer den 4:e h2 i föräldern att hittas (till skillnad från nth-child, som bara hittar den h2 som är det 4:e elementet i föräldern).

Syntax

cssselektor:nth-of-type(tal | odd | even | uttryck){

}

Värden

Värde	Beskrivning
tal	Ett positivt tal början från `1`. Anger elementets nummer, som vi vill rikta in oss på. Numrering av element börjar från `1`.
`odd`	Ojämna element.
`even`	Jämna element.
uttryck	Man kan skapa speciella uttryck med bokstaven n, som betecknar alla heltal från noll (inte från ett) till oändligheten. Så, `2n` - betyder alla jämna tal (början från det andra). Hur förstår man detta? Ersätt i `n` sekventiellt tal från `0` och så vidare: om n = 0, då ger 2n 0 - det finns inget sådant element (numrering av element från 1), om n = 1, då ger 2n 2 - det andra elementet, om n = 2, ger 2n 4 - det fjärde elementet. Om man skriver 3n - det blir var tredje element (början från det tredje), och så vidare.

Exempel

Låt oss hitta h2 som är den 2:a h2 i föräldern:

html<div>
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
</div>

cssh2:nth-of-type(2) {
  color: red;
}

Результат:

Exempel

Låt oss hitta alla jämna h2:

html<div>
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
</div>

cssh2:nth-of-type(even) {
  color: red;
}

Результат:

Exempel

Låt oss hitta alla ojämna h2:

html<div>
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
  
  <h2>rubrik</h2>
  <p>stycke</p>
</div>

cssh2:nth-of-type(odd) {
  color: red;
}

Результат: