nth-of-type жалған сыныбы

nth-of-type жалған сыныбы берілген түрдегі n-ші ұрпақ болып табылатын элементті таңдайды.

Яғни, егер мен h2:nth-of-type(4) деп жазсам - ата-анадағы 4-ші h2 табылады (ата-анадағы 4-ші элемент болып табылатын h2 ғана табатын nth-child-тен айырмашылығы).

Синтаксис

cssселектор:nth-of-type(сан | odd | even | өрнек){

}

Мәндері

Мән	Сипаттама
сан	`1`-ден басталатын оң сан. Біз қол жеткізгіміз келетін элементтің номерін көрсетеді. Элементтердің нөмірлеуі `1`-ден басталады.
`odd`	Тақ элементтер.
`even`	Жұп элементтер.
өрнек	Барлық бүтін сандарды нөлден (бірден емес) шексіздікке дейін белгілейтін n әрпімен арнайы өрнектер құрастыруға болады. Осылайша, `2n` - барлық жұп сандарды білдіреді (екіншіден бастап). Мұны қалай түсінуге болады? `n`-ге `0`-ден бастап сандарды ретімен қоямыз: егер n = 0 болса, онда 2n 0 береді - мұндай элемент жоқ (элементтердің нөмірлеуі 1-ден басталады), егер n = 1 болса, онда 2n 2 береді - екінші элемент, егер n = 2 болса, 2n 4 береді - төртінші элемент. Егер 3n деп жазсақ - бұл әрбір үшінші элемент болады (үшіншіден бастап), және т.б.

Мысал

Ата-анадағы 2-ші h2 болып табылатын h2-ті табайық:

html<div>
  <h2>тақырып</h2>
  <p>абзац</p>
  
  <h2>тақырып</h2>
  <p>абзац</p>
  
  <h2>тақырып</h2>
  <p>абзац</p>
</div>

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

Результат:

Мысал

Барлық жұп h2-терді табайық:

html<div>
  <h2>тақырып</h2>
  <p>абзац</p>
  
  <h2>тақырып</h2>
  <p>абзац</p>
  
  <h2>тақырып</h2>
  <p>абзац</p>
  
  <h2>тақырып</h2>
  <p>абзац</p>
  
  <h2>тақырып</h2>
  <p>абзац</p>
</div>

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

Результат:

Мысал

Барлық тақ h2-терді табайық:

html<div>
  <h2>тақырып</h2>
  <p>абзац</p>
  
  <h2>тақырып</h2>
  <p>абзац</p>
  
  <h2>тақырып</h2>
  <p>абзац</p>
  
  <h2>тақырып</h2>
  <p>абзац</p>
  
  <h2>тақырып</h2>
  <p>абзац</p>
</div>

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

Результат: