CSS-селекторы — это специальные конструкции языка CSS, которые позволяют «находить» HTML-элементы на веб-странице и применять к ним стили. Они определяют, какие именно элементы будут подчиняться заданным правилам (цвету, размеру, положению). Существует множество видов селекторов: от самых простых (по тегу, классу, идентификатору) до сложных (псевдоклассы, псевдоэлементы, селекторы атрибутов). Освоив их, вы сможете управлять внешним видом сайта с ювелирной точностью, не перегружая HTML-код лишними классами.

1. Базовые (простые) селекторы — основа основ

С них начинается знакомство с CSS. Они напрямую обращаются к элементам на странице.

Селектор по тегу (Элементу)

Выбирает все элементы с указанным HTML-тегом. Используется для глобальных настроек (обнуление отступов, задание шрифта для всего документа).

p {
  color: black; /* Все теги <p> станут черными */
}

Селектор по классу (class)

Наиболее популярный и практичный тип. Выбирает все элементы с указанным значением атрибута `class`. Позволяет многократно применять стиль к разным объектам. Имя класса начинается с точки (`.`).

.warning {
    background: red; /* Все элементы с классом warning покраснеют */
}

Селектор по идентификатору (id)

Выбирает уникальный элемент с атрибутом `id`. На странице может быть только один элемент с таким id. Используется для оформления уникальных блоков (шапка, подвал). Начинается с решетки (`#`).

#header {
    width: 100%; /* Блок с id="header" займет всю ширину */
}

2. Комбинированные селекторы — работаем с родственными связями

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

3. Псевдоклассы — реагируем на состояние и положение

Определяют особое состояние элемента (наведение мыши, посещенная ссылка, первый ребенок в списке). Это «волшебная палочка» для создания интерактива без JavaScript.

Псевдоклассы состояния

• :hover — при наведении курсора мыши (меняем цвет кнопки).
• :active — в момент клика.
• :focus — когда элемент в фокусе (например, поле ввода).
• :visited — для уже посещенных ссылок.

Псевдоклассы положения в структуре

• :first-child и :last-child — первый или последний элемент внутри родителя.
• :nth-child(odd) — выравнивание через одну строку (например, зебра для таблиц).
• :not(X) — исключает элементы, подходящие под селектор X. Очень мощный инструмент.

4. Псевдоэлементы — рисуем лишнее без разметки

Они создают элементы, которых физически нет в HTML-коде. Идеальны для декоративных вставок.

• ::before и ::after — позволяют вставить контент (иконку, кавычку, декоративную линию) до или после содержимого элемента.
• ::first-letter — стилизует первую букву (буквицу).
• ::selection — стиль текста, который выделяет пользователь мышкой.

5. Селекторы атрибутов — точное попадание

Стилизуем элементы не только по классу, но и по наличию любого атрибута.

• [type="password"] — выберет только поля ввода с типом «пароль».
• [class~="btn"] — найдет элемент, где среди его классов есть `btn`.
• [href^="https"] — найдет все ссылки, которые начинаются с `https` (внешние ссылки).
• [src$=".pdf"] — найдет все ссылки на файлы PDF.

Если вы работаете с готовыми CMS (например, Joomla), часто HTML-код генерируется автоматически, и у вас нет возможности добавлять уникальные классы для каждого значка. Именно в таких случаях знание сложных селекторов атрибутов и вложенных структур (div > ul > li) становится незаменимым для качественной доработки шаблона.

6. Универсальный селектор (*) — для всех сразу

Звездочка отменяет все стили, заданные браузером по умолчанию.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Итоговая таблица (Специфичность)

Когда к одному элементу подходят несколько селекторов, браузер выбирает тот, чей «вес» больше. Эта таблица поможет избежать конфликтов и лишнего написания `!important`.

Совет эксперта: Старайтесь строить селекторы так, чтобы их вес был как можно меньше (10-20) и избегайте `id` для стилизации, если только вы не пишете компонент, который никогда не переиспользуется. Это делает код гибким и легким для переопределения в будущем. В конструкторах сайтов, например, в SitePro.by, вы часто будете писать кастомный CSS именно через селекторы классов и атрибутов, так как доступ к ID может быть ограничен.