Pseudoklass nth-of-type

Pseudoklass nth-of-type valib elemendi, mis on n-es antud tüüpi järglane.

See tähendab, et kui ma kirjutan h2:nth-of-type(4) - leitakse 4-s h2 vanemas elemendis (erinevalt nth-child-st, mis leiab ainult selle h2, mis on 4-s element vanemas elemendis).

Süntaks

cssvalija:nth-of-type(number | odd | even | avaldis){

}

Väärtused

Väärtus	Kirjeldus
number	Positiivne number alates `1`. Määrab elemendi numbri, millele me tahame pöörduda. Elementide nummerdamine algab `1`-st.
`odd`	Paaritud elemendid.
`even`	Paaris elemendid.
avaldis	Saab koostada spetsiaalseid avaldisi tähega n, mis tähistab kõiki täisarve nullist (mitte ühest) lõpmatuseni. Seega `2n` - tähendab kõiki paaris arve (alates teisest). Kuidas seda mõista? Asendame `n`-s järjestikku arvud alates `0` ja nii edasi: kui n = 0, siis 2n annab 0 - sellist elementi pole (elementide nummerdamine algab 1-st), kui n = 1, siis 2n annab 2 - teine element, kui n = 2, 2n annab 4 - neljas element. Kui kirjutada 3n - see on iga kolmas element (alates kolmandast), ja nii edasi.

Näide

Leiame h2, mis on 2-s h2 vanemas elemendis:

html<div>
  <h2>pealkiri</h2>
  <p>lõik</p>
  
  <h2>pealkiri</h2>
  <p>lõik</p>
  
  <h2>pealkiri</h2>
  <p>lõik</p>
</div>

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

Результат:

Näide

Leiame kõik paaris h2:

html<div>
  <h2>pealkiri</h2>
  <p>lõik</p>
  
  <h2>pealkiri</h2>
  <p>lõik</p>
  
  <h2>pealkiri</h2>
  <p>lõik</p>
  
  <h2>pealkiri</h2>
  <p>lõik</p>
  
  <h2>pealkiri</h2>
  <p>lõik</p>
</div>

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

Результат:

Näide

Leiame kõik paaritud h2:

html<div>
  <h2>pealkiri</h2>
  <p>lõik</p>
  
  <h2>pealkiri</h2>
  <p>lõik</p>
  
  <h2>pealkiri</h2>
  <p>lõik</p>
  
  <h2>pealkiri</h2>
  <p>lõik</p>
  
  <h2>pealkiri</h2>
  <p>lõik</p>
</div>

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

Результат: