Допустим, есть такой HTML:
Следующий CSS будет делать одно и тоже:
Хотя, конечно, в этих селекторах, есть разница.
Псевдокласс :nth-child, означачает выбрать элемент, если:
Псевдокласс :nth-of-type, означает:
Предположим, что наша разметка изменена следующим образом:
Теперь первый вариант не работает:
Второй продолжает работать:
Под «Не работает» я имею ввиду, что cелектор
Если добавить
Мне кажется
Большинство ситуаций, когда я говорю «Почему мой селектор с :nth-child не работает?» случаются из за того, что я забываю про выборку тегов и нужный тег не оказывается по счету тем, который нужен. Поэтому, при использовании
Но, конечно, все зависит от конкретной ситуации.
Поддержка браузерами
<section>
<p>Little</p>
<p>Piggy</p> <!-- Нужен этот элемент -->
</section>
Следующий CSS будет делать одно и тоже:
p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }
Хотя, конечно, в этих селекторах, есть разница.
Псевдокласс :nth-child, означачает выбрать элемент, если:
- Этот элемент — параграф;
- Это второй элемент одного родителя.
Псевдокласс :nth-of-type, означает:
- Выбрать второй параграф одного родителя.
Предположим, что наша разметка изменена следующим образом:
<section>
<h1>Words</h1>
<p>Little</p>
<p>Piggy</p> <!-- Нужен этот элемент -->
</section>
Теперь первый вариант не работает:
p:nth-child(2) { color: red; } /* Не работает */
Второй продолжает работать:
p:nth-of-type(2) { color: red; } /* Продолжает работать */
Под «Не работает» я имею ввиду, что cелектор
:nth-child
выбирает слово «Little» вместо «Piggy». Потому что элемент выполняет оба условия: 1) Это второй элемент родительского элемента и 2) Это параграф. Под «Продолжает работать», я имею ввиду, что селектор продолжает выбираться «Piggy», потому что это второй параграф родительского элемента.Если добавить
<h2>
после <h1>
, то селектор с :nth-child не выберет ничего, потому что параграф больше не является вторым элементом. Селектор с :nth-of-type
продолжит работать.Мне кажется
:nth-of-type
менее хрупкий и более полезный в целом, несмотря на это :nth-child
продолжает быть основным в работе. Как часто вы думаете «Я хочу выбрать второй элемент в родительском блоке, если это параграф». Возможно иногда, но чаще вы думаете «Выбрать второй параграф» или «выбрать каждую третью строку таблицы», для этих задач больше подходит :nth-of-type
(опять же, на мой взгляд).Большинство ситуаций, когда я говорю «Почему мой селектор с :nth-child не работает?» случаются из за того, что я забываю про выборку тегов и нужный тег не оказывается по счету тем, который нужен. Поэтому, при использовании
:nth-child
лучше указывать его от родителя и не использовать привязку к тегу.dl :nth-child(2) { } /* Этот вариант лучше чем */
dd:nth-child(2) { } /* этот */
Но, конечно, все зависит от конкретной ситуации.
Поддержка браузерами
:nth-of-type
довольно приличная… Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+. Я бы сказал, если вам нужна более глубокая поддержка, то используйте jQuery (используйте селектор и применяйте класс, там где нужно), но jQuery прекратил поддержку :nth-of-type
. Слышал, что из за редкого использования, но мне это кажется странным. Если вы хотите пойти этим путем, то вот плагин возвращающий поддержку назад.