Блог

Недавно на хабре появилась интересная статья - "Различия между :nth-child и :nth-of-type", в ней описывают несколько вариантов использования, их недостатки, кросбраузерность, и конечно же альтернативы!

Допустим, есть такой HTML:

Code

<section>
  <p>Little</p>
  <p>Piggy</p> 
  </section>

Следующий CSS будет делать одно и тоже:

Code

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

Code

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

Хотя, конечно, в этих селекторах, есть разница.

Псевдокласс :nth-child, означачает выбрать элемент, если:

Этот элемент — параграф;
Это второй элемент одного родителя.

Псевдокласс :nth-of-type, означает:

Выбрать второй параграф одного родителя.

Предположим, что наша разметка изменена следующим образом:

Code

<section>
  <h1>Words</h1>
  <p>Little</p>
  <p>Piggy</p> 
  </section>

Теперь первый вариант не работает:

Code

p:nth-child(2) { color: red; } /* Не работает */

Второй продолжает работать:

Code

p:nth-of-type(2) { color: red; } /* Продолжает работать */

Под «Не работает» я имею ввиду, что cелектор :nth-child выбирает слово «Little» вместо «Piggy». Потому что элемент выполняет оба условия: 1) Это второй элемент родительского элемента и 2) Это параграф. Под «Продолжает работать», я имею ввиду, что селектор продолжает выбираться «Piggy», потому что это второй параграф родительского элемента.

Если добавить

после

, то селектор с :nth-child не выберет ничего, потому что параграф больше не является вторым элементом. Селектор с :nth-of-type продолжит работать.

Мне кажется :nth-of-type менее хрупкий и более полезный в целом, несмотря на это :nth-child продолжает быть основным в работе. Как часто вы думаете «Я хочу выбрать второй элемент в родительском блоке, если это параграф». Возможно иногда, но чаще вы думаете «Выбрать второй параграф» или «выбрать каждую третью строку таблицы», для этих задач больше подходит :nth-of-type (опять же, на мой взгляд).

Большинство ситуаций, когда я говорю «Почему мой селектор с :nth-child не работает?» случаются из за того, что я забываю про выборку тегов и нужный тег не оказывается по счету тем, который нужен. Поэтому, при использовании :nth-child лучше указывать его от родителя и не использовать привязку к тегу.

Code

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 довольно приличная… Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+. Я бы сказал, если вам нужна более глубокая поддержка, то используйте jQuery (используйте селектор и применяйте класс, там где нужно), но jQuery прекратил поддержку :nth-of-type. Слышал, что из за редкого использования, но мне это кажется странным. Если вы хотите пойти этим путем, то вот плагин возвращающий поддержку назад.

Статья была довольно интересной, для себя я сделал несколько хороших выводов, но на этом еще не не все! Моя старая привычка читать все комментарии к любому материалу, привела меня на интересные моменты (смотрим ниже)

Комментарий dnv777:
чтоб быть более точным, jQuery использует движок Sizzle, а тот в свою очередь не поддерживает nth-of-type.
в jQuery это можно реализовать как $('p:odd') для четных и $('p:even') для нечетных.

Комментарий kuber
Jquery очень гибок.
Например:
$('p').eq(2) // выбрать второй параграф.

Комментарий dnv777:
а если каждый третий то уже надо ухищряться, например так
$('p').each(function(i){
if(i%3==0) return;
///делаем что хотим
)}

CSS3 structural pseudo-class selector tester

Источник информации: habrahabr.ru smile

за что им большое спасибо!