Псевдокласот nth-of-type

Псевдокласот nth-of-type избира елемент, кој е n-ти потомок од даден тип.

Односно, ако јас напишам h2:nth-of-type(4) - ќе се најде 4-тиот h2 во родителот (за разлика од nth-child, кој ќе го најде само оној h2, кој е 4-тиот елемент во родителот).

Синтакса

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 - ова е секој трет елемент (почнувајќи од третиот), и така натаму.

Пример

Да го најдеме h2, кој е 2-риот 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;
}

Результат: