Псевдоклас 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;
}

Результат: