Что такое псевдокласс в CSS?

Псевдокласс — часть селектора, которая выбирает элемент по состоянию, положению среди соседей или отношению к другим элементам. Пишется через одно двоеточие.

Основные группы

• Взаимодействие: :hover, :active, :focus, :focus-visible, :focus-within.
• Формы: :checked, :disabled, :required, :invalid, :placeholder-shown.
• Положение: :first-child, :last-child, :nth-child(2n+1), :only-child.
• Ссылки: :visited, :target.
• Логика: :not(), :is(), :where(), :has().

.button:focus-visible { outline: 2px solid #06f; }
input:invalid:not(:placeholder-shown) { border-color: red; }
.form:has(input:invalid) .submit { opacity: .5; }

Нюансы

• :focus-visible показывает фокус только при навигации с клавиатуры — лучше для доступности, чем :focus.
• :has() — «родительский селектор»: выбирает элемент по его потомкам.
• :where() имеет нулевую специфичность, :is() — специфичность самого сильного аргумента.

Коротко для собеседования

Псевдокласс выбирает элемент по состоянию или положению (:hover, :checked, :nth-child, :has), не меняя разметку.

Подробнее: MDN — Псевдоклассы