Псевдоклассы описывают состояние элемента, которое меняется в зависимости от действий пользователя или положения элемента в разметке. Самый известный пример — hover, стиль при наведении курсора, но список этим далеко не ограничивается.
Focus нужен для полей ввода и других интерактивных элементов, чтобы показать, какой из них сейчас активен при навигации с клавиатуры. Незаметный или вовсе убранный focus — одна из самых частых причин, по которой сайтом неудобно пользоваться без мыши, хотя формально все элементы кликабельны.
Nth-child и его варианты позволяют стилизовать элементы по их порядковому номеру внутри родителя — например, выделить каждую вторую строку таблицы другим фоном или убрать отступ у последнего элемента списка через last-child. Это избавляет от необходимости добавлять лишние классы вручную под каждый частный случай.
Псевдоэлементы, в отличие от псевдоклассов, создают как бы дополнительный элемент внутри существующего, хотя в разметке его нет. Before и after чаще всего используют для декоративных значков, кавычек вокруг цитаты или для псевдоэлемента-подложки поверх фонового изображения.
Важно различать одинарное и двойное двоеточие: по современному стандарту псевдоэлементы пишутся с двумя двоеточиями, а псевдоклассы с одним, хотя браузеры по-прежнему поддерживают старую запись before и after с одним двоеточием ради обратной совместимости со старыми сайтами.
Полный список псевдоклассов и псевдоэлементов с примерами использования есть в справочнике по псевдоклассам на MDN.
Ещё один полезный псевдокласс — not, который исключает элементы, подходящие под определённое условие. Например, применить стиль ко всем пунктам списка, кроме последнего, можно одной строкой, без добавления отдельного класса специально для этого исключения.
