Какие селекторы в CSS важны на практике и как их применять?

Селекторы выбирают элементы, к которым применяются стили. На практике важно знать базовые селекторы, комбинаторы и современные функциональные псевдоклассы.

Базовые

.card {}            /* класс — основной инструмент */
button {}           /* тег — для базовых стилей */
#app {}             /* id — редко, слишком высокий вес */
[type="email"] {}   /* атрибут */
* {}                /* все элементы */

Комбинаторы

.list li {}         /* потомок на любой глубине */
.list > li {}       /* прямой потомок */
h2 + p {}           /* соседний следующий */
h2 ~ p {}           /* все следующие соседи */

Псевдоклассы и псевдоэлементы

• состояния: :hover, :focus-visible, :checked, :disabled;
• положение: :first-child, :nth-child(odd);
• логика: :not(), :is(), :where(), :has();
• части: ::before, ::after, ::placeholder.

Как применять

• в основном классы с низкой и одинаковой специфичностью;
• избегать длинных цепочек по структуре (.a > div > ul li a);
• :has() и :is() для сокращения кода.

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

Классы, теги, атрибуты, комбинаторы (пробел, >, +, ~) и псевдоклассы; на практике — короткие селекторы по классам и :has()/:is() для сложных случаев.

Подробнее: MDN — Селекторы CSS