:nth-of-type()

Псевдокласс :nth-of-type() работает схожим образом с :nth-child(), но выбирает элементы, исходя из их положения в группе братских элементов, лишь указанного типа.

Если братские элементы относятся к одному типу (<li>, как показано ниже), то :nth-child() и :nth-of-type() покажут одинаковый результат.

<ul>
  <li>Один</li>
  <li>Два</li>
  <li>Три</li>
</ul>

Для приведённого списка li:nth-child(odd) и li:nth-of-type(odd) одинаково выберут все нечётные пункты (первый и третий).

В ситуации, когда внутри одного родителя комбинируются разные элементы, псевдоклассы :nth-of-type() и :nth-child() работают по-своему. В качестве примера возьмём следующий фрагмент HTML.

<section>
  <h2>Первый заголовок</h2>
  <p>Первый абзац</p>
  <h2>Второй заголовок</h2>
  <p>Второй абзац</p>
  <p>Третий абзац</p>
</section>

И рассмотрим некоторые варианты CSS.

section :nth-child(2) { color: green; }

Использование :nth-child(2) без указания селектора выберет второй элемент любого типа (<p>Первый абзац</p>) и установит для него зелёный цвет текста.

section :nth-of-type(2) { color: green; }

Использование :nth-of-type(2) без указания селектора выберет второй элемент каждого типа. Внутри <section> встречаются элементы <h2> и <p>, поэтому будут выбраны строки <h2>Второй заголовок</h2> и <p>Второй абзац</p>.

section p:nth-child(2) { color: green; }

Добавление селектора p к :nth-child(2) вводит дополнительное ограничение — сперва берётся второй элемент, затем смотрится, является ли этот элемент абзацем. Только при совпадении этих двух условий (вторым элементом идёт именно <p>) элемент будет выбран. В данном случае зелёным цветом окрашивается строка <p>Первый абзац</p>.

section p:nth-of-type(2) { color: green; }

Иначе работает добавление селектора p к :nth-of-type(2). Сперва берутся все элементы <p> и среди них выбирается второй. При этом наличие других элементов и их порядок в расчёт не принимается. В итоге будет выбрана строка <p>Второй абзац</p>.

section p:nth-child(odd) { color: green; }

Будут выбраны все нечётные элементы, и только <p>. Если сперва сделать выборку всех нечётных элементов (первый, третий и пятый), то останется следующее.

<h2>Первый заголовок</h2>
<h2>Второй заголовок</h2>
<p>Третий абзац</p>

Из них абзацем является только третья строка, она и будет выбрана. В итоге зелёным цветом выделится <p>Третий абзац</p>.

section p:nth-of-type(odd) { color: green; }

p:nth-of-type() сперва оставляет только абзацы.

<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>

Затем из полученного промежуточного результата выбираются нечётные элементы (первый и третий). Так что зелёным цветом выделятся строки <p>Первый абзац</p> и <p>Третий абзац</p>.

Таким образом, :nth-child() используется для выбора однотипных братских элементов (<li>, <td>, <tr> и др.), а :nth-of-type() для выбора братских элементов определённого типа (вроде <p>, <div> и др.), когда они встречаются совместно. Впрочем, на практике, разработчики отдают предпочтение какому-то одному псевдоклассу и чаще используют именно его.

В примере 1 чётные картинки (элементы <img>) прижимаются к правому краю через свойство float со значением right, а нечётные картинки прижимаются к левому краю опять же через свойство float, но уже со значением left. Выбор чётных и нечётных элементов <img> происходит с помощью псевдокласса :nth-of-type с параметрами even и odd.

Пример 1. Использование :nth-of-type()