Что такое псевдоэлементы и псевдоклассы в CSS и каково их назначение

Что проверяют

Различаете ли вы состояние элемента и его виртуальную часть и понимаете ли, где уместен каждый из механизмов. Следом обычно просят нарисовать что-нибудь через ::before без лишней разметки или спрашивают про специфичность.

Как отвечать

Начните с разницы в одной фразе: псевдокласс выбирает существующий элемент по состоянию или положению, псевдоэлемент создаёт или выделяет часть элемента, которой нет в DOM как отдельного узла.

• псевдоклассы: одно двоеточие. Состояние (:hover, :focus-visible, :checked, :disabled), структура (:nth-child(), :first-of-type), логика (:not(), :is(), :where(), :has());
• псевдоэлементы: два двоеточия. ::before и ::after появляются только при заданном content, хотя бы пустом content: "". Кроме них ::first-line, ::first-letter, ::placeholder, ::selection, ::marker, ::backdrop;
• специфичность: псевдокласс весит как класс, псевдоэлемент как селектор типа. Исключения: :where() даёт ноль, а :is(), :not() и :has() берут вес самого тяжёлого аргумента;
• :has(): тот самый «родительский селектор», работает во всех современных браузерах. Например, подсветить форму, внутри которой есть input:invalid.

Практические примеры: иконки и декоративные линии через ::before, свой чекбокс через :checked + label, полосатая таблица через :nth-child(even), обводка фокуса только при навигации с клавиатуры через :focus-visible.

Про двоеточия: браузеры принимают старую запись :before с одним двоеточием ради совместимости с CSS2, но новые псевдоэлементы работают только с ::.

Где спотыкаются

Забывают content и не понимают, почему ::after не появился. Или вешают ::before на <img> и <input>: у замещаемых элементов нет содержимого, куда его вставить.

Кладут в content значимый текст. Скринридеры его зачитывают, но выделить и скопировать его нельзя, а при локализации его придётся искать в CSS. Смысловой текст должен жить в разметке.

Путают :nth-child() и :nth-of-type(): первый считает всех соседей, второй только элементы того же тега. Поэтому p:nth-child(2) не сработает, если вторым ребёнком идёт h2.