Различия между :nth-child и :nth-of-type


Допустим, есть такой HTML:
<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. Слышал, что из за редкого использования, но мне это кажется странным. Если вы хотите пойти этим путем, то вот плагин для поддержки :nth-of-type.

Related: не забывайте о удивительным двоюродных братьев :first-of-type, :last-of-type, :nth-last-of-type and :only-of-type. Узнайте больше здесь.

Если вы хотите, чтобы поиграть с визуальным примером, попробуйте этот инструмент от Леа Verou.

0 комментариев

Оставить комментарий