Представим, что HTML-страница — это огромный мегаполис, населенный миллионами элементов: дома — <div>, вывески — <h1>, улицы — <ul>. Чтобы навести порядок в этом городе, нужен инструмент, позволяющий мгновенно найти любой объект и изменить его внешний вид. Этим инструментом в веб-разработке служат CSS-селекторы.
Селектор — это шаблон, который сообщает браузеру, к какому элементу HTML-документа нужно применить стили. Знание селекторов — это умение разговаривать с браузером на его языке. Программист, владеющий этой темой, способен сверстать макет любой сложности, не плодя лишних «костылей» в коде.
Разберем четыре фундаментальных типа селекторов, без которых не обходится ни одна таблица стилей: универсальный селектор (*), селектор по тегу, по классу (.class) и по идентификатору (#id).
1. Универсальный селектор (*)
Универсальный селектор (символ звездочки *) выбирает все элементы на странице (или внутри конкретного родителя). Он охватывает каждый элемент на странице, включая <html> и <body>.
Зачем он нужен:
Чаще всего используется для глобального сброса отступов (margin и padding) или для применения свойства box-sizing ко всем элементам.
Синтаксис:
* { свойство: значение; }Пример:
* {
box-sizing: border-box;
}Это гарантирует применение к каждому тегу на странице.
2. Селектор по идентификатору (#id)
Выбирает элемент по его уникальному атрибуту id.
Зачем он нужен:
Согласно стандартам, значение id должно быть уникальным на всей странице. Значение id используется для создания якорей (навигации) или для точечной манипуляции элементом через JavaScript.
Синтаксис:
#имя_идентификатора { свойство: значение; }Символ решетки — отличительный знак идентификатора.
Пример HTML:
<div id="header">Заголовок</div>
Пример CSS:
#header {
background-color: black;
}Лучше использовать id для навигации, а для красоты использовать классы.
3. Селектор по классу (.class)
Это самый гибкий и часто используемый тип селектора. Класс — это имя, которое разработчик сам присваивает HTML-элементам через атрибут class.
Зачем он нужен:
Для группировки разнородных элементов. Можно применять один и тот же класс к заголовкам, кнопкам и блокам, если они должны выглядеть одинаково. Класс переиспользуем: на одной странице может быть сколько угодно элементов с одинаковым классом.
Синтаксис:
.имя_класса { свойство: значение; }Точка в начале — это маркер для браузера.
Пример HTML:
<button class="btn">Кнопка</button>
Пример CSS:
.btn {
background-color: blue;
}Плюс: Максимальная гибкость и переиспользуемость.
Лучшая практика: Давайте классам смысловые имена (.button, .error-message и тд), а не описывающие внешний вид (.red-text).
4. Селектор по тегу (элементу)
Это самый простой способ стилизации. В качестве селектора выступает непосредственно название HTML-тега (например, <p>, <h1> или <a>).
Зачем он нужен:
Задает базовые, глобальные правила для всех элементов одного типа. Например, чтобы весь текст в абзацах имел определенный шрифт, а у всех изображений не было рамок.
Синтаксис:
имя_тега { свойство: значение; }Пример:
a {
text-decoration: none;
}
p {
font-size: 16px;
line-height: 1.5;
}Плюс: Простота и глобальность.
Минус: Низкая специфичность. Если вам нужно выделить один конкретный абзац среди десятка других, селектор по тегу не поможет — он покрасит все.
Вес тегов. Как браузер разрешает конфликты
Представим, что к одному элементу применилось сразу несколько правил. Какое будет приоритетнее? Вес селекторов (специфичность) рассчитывается системой (a, b, c):
- ID имеет вес (1, 0, 0).
- Класс (а также псевдоклассы и атрибуты) имеет вес (0, 1, 0).
- Тег (и псевдоэлементы) имеет вес (0, 0, 1).
- Универсальный селектор * имеет вес (0, 0, 0). Он уступает приоритет всем, кроме унаследованных свойств.
Пример HTML:
<p id="urgent" class="note">
Пример CSS:
/* Вес: 0, 0, 1 */
p { color: green; }
/* Вес: 0, 1, 0 */
.note { color: blue; }
/* Вес: 1, 0, 0 */
#urgent { color: red; }В примере текст будет всегда красным, т.к. ID всегда имеет приоритет.