Что такое селектор в CSS: простое определение

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

Селектор (от англ. select — выбирать) — это шаблон, который позволяет обратиться к элементу или группе элементов веб-страницы, чтобы применить к ним стили CSS.

Представьте, что у вас есть текст на странице, состоящий из заголовков, абзацев, ссылок и списков. Вам нужно, чтобы все ссылки были синего цвета и без подчёркивания. Вместо того чтобы вручную оформлять каждую ссылку в HTML (что невероятно трудоёмко и неэффективно), вы пишете одно CSS-правило с селектором, который выбирает ВСЕ теги <a> (гиперссылки), и задаёте им нужные свойства. Это и есть мощь селекторов.

Базовая структура CSS-правила с селектором

Любое CSS-правило состоит из двух основных частей:

  1. Селектор — определяет, какие элементы будут стилизованы.
  2. Блок объявлений — в фигурных скобках {} содержит одно или несколько свойств и их значений, которые применяются к выбранным элементам.

Пример:

p {
    color: #333333;
    font-size: 16px;
    line-height: 1.5;
}

В этом примере p — это селектор (он выбирает все теги абзаца <p>). Всё, что внутри фигурных скобок — это стили, которые получат все выбранные абзацы: цвет текста тёмно-серый, размер шрифта 16 пикселей и межстрочный интервал 1.5.

Зачем нужны селекторы?

  • Точность: Можно стилизовать как все элементы одного типа, так и конкретный элемент с уникальным идентификатором.
  • Эффективность: Одно правило, заданное через селектор, применяется ко всем подходящим элементам на странице, что сокращает код и упрощает его поддержку.
  • Гибкость: Комбинируя разные типы селекторов, можно создавать сложные и точные условия для применения стилей (например, «первый элемент списка внутри боковой панели»).
  • Разделение ответственности: CSS с селекторами позволяет чётко отделить структуру документа (HTML) от его представления (стили).

Основные типы CSS-селекторов

Существует множество видов селекторов, которые позволяют делать выборку с разной степенью точности. Рассмотрим самые основные и часто используемые.

1. Селекторы по тегу (элементу)

Самый простой тип. Выбирает все HTML-элементы с указанным именем тега.

h1 { color: red; } /* Все заголовки первого уровня */
ul { padding-left: 20px; } /* Все ненумерованные списки */
a { text-decoration: none; } /* Все ссылки */

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

Класс — это атрибут, который можно назначать любым HTML-элементам. В CSS селектор по классу начинается с точки .. Это один из самых популярных типов селекторов.

<!-- HTML -->
<p class="important-text warning">Внимание!</p>
<div class="warning">Осторожно!</div>

/* CSS */
.important-text { font-weight: bold; } /* Стилизует только абзац */
.warning { color: orange; } /* Стилизует и абзац, и блок div */

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

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

<!-- HTML -->
<header id="main-header">...</header>

/* CSS */
#main-header {
    background-color: #2c3e50;
    padding: 20px;
}

4. Универсальный селектор

Обозначается звёздочкой * и выбирает ВСЕ элементы на странице. Часто используется для сброса отступов (margin, padding) или в наследовании свойств box-sizing.

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

5. Селекторы по атрибуту

Позволяют выбирать элементы на основе наличия или значения их атрибутов (например, href, type, target).

a[target="_blank"] { /* Все ссылки, открывающиеся в новой вкладке */
    border-bottom: 1px dotted blue;
}
input[type="text"] { /* Все текстовые поля ввода */
    border: 1px solid #ccc;
}

Комбинаторы: связь между селекторами

Чтобы делать выборку ещё точнее, селекторы можно комбинировать, описывая отношения между элементами в структуре документа (DOM).

  • Пробел (потомок): div p — выберет все абзацы <p>, которые находятся ВНУТРИ <div> на любом уровне вложенности.
  • > (дочерний элемент): ul > li — выберет только те <li>, которые являются непосредственными детьми <ul>.
  • + (соседний одноуровневый): h2 + p — выберет первый абзац <p>, который следует сразу после заголовка <h2>.
  • ~ (все одноуровневые): h2 ~ p — выберет ВСЕ абзацы <p>, которые находятся после заголовка <h2> на одном уровне вложенности.

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

Это особые виды селекторов, которые позволяют выбирать элементы в определённом состоянии или их части.

Псевдоклассы (начинаются с :) определяют особое состояние элемента:

a:hover { color: red; } /* Ссылка при наведении курсора */
li:first-child { font-weight: bold; } /* Первый элемент списка */
input:focus { outline: 2px solid blue; } /* Поле ввода в фокусе */

Псевдоэлементы (начинаются с ::) позволяют стилизовать определённые части элемента:

p::first-line { font-variant: small-caps; } /* Первая строка абзаца */
p::before { content: "→ "; } /* Добавить контент ПЕРЕД абзацем */
::selection { background-color: yellow; } /* Стиль выделенного мышью текста */

Заключение

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

Источники