: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()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>:nth-of-type()</title> <style> img:nth-of-type(odd) { float: left; /* Прижимаем к левому краю */ margin: 0 1em 1em 0; /* Отступ справа и снизу */ } img:nth-of-type(even) { float: right; /* Прижимаем к правому краю */ margin: 0 0 1em 1em; /* Отступ снизу и слева */ } </style> </head> <body> <h1>Фотографии старого Киева</h1> <img src="image/thumb1.jpg" alt=""> <p>Софийский собор</p> <img src="image/thumb2.jpg" alt=""> <p>Польский костёл</p> <img src="image/thumb3.jpg" alt=""> <p>Купеческий клуб</p> <img src="image/thumb4.jpg" alt=""> <p>Памятник Св. Владимиру</p> </body> </html>