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

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

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

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

   
Привет
   
Пользователь
    

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

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

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

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

   
Кабинет
   
Привет
   
Пользователь
    

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

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

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

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

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

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

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

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