Css. Разница между :nth-child и :nth-of-type (:last-child и :last-of-type)

Главная  >>  Frontend  >>  css  >>  Css. Разница между :nth-child и :nth-of-type (:last-child и :last-of-type)

Использование псевдоклассов в css очень удобно. Применение, в частности, :nth-child, :nth-of-type, :last-child,:last-of-type позволяют сделать разметку более гибкой и легкой, зачастую позволяя избежать использования лишних классов.

Но часто бывает не понятна разница между интуитивно схожими формулировками, например, last-child и last-of-type.

Давайте разберем на примере :nth-child и :nth-of-type.

К примеру есть вот такая разметка:

Чтобы выделить цветом нужный нам элемент подойдут ОБА следующих правила:

Оба правила получают доступ к второму элементу.

Разницу между элементами мы сможем ощутить, разобрав следующий вариант — например, у нас изменилась структура страницы.

Если к новой верстке применить это правило:

.. в результате подсветится слово Привет. Почему?
Потому что:
— это второй элемент в родительском элементе
— это действитель параграф.

Второе же правило:

.. будет работать по-прежнему верно.

Причина этому — то, что nth-of-type ищет именно второй параграф, а не любой второй элемент, после этого проверяя, является он параграфом или нет

Тема простая, но не очень легко понимаемая с первого раза. Надеюсь объяснил все понятно. 🙂