Руководство по селекторам в CSS

CSS-селектор — это шаблон, соответствующий элементам на веб-странице. Стилизационные правила, связанные с этим селектором, будут применяться к элементам, которые соответствуют шаблону селектора.

Селекторы являются одним из наиболее важных аспектов CSS, так как они позволяют вам выбирать определенные элементы на веб-странице различными способами, чтобы их можно было стилизовать.

В CSS доступно несколько типов селекторов, давайте рассмотрим их подробнее:

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

Универсальный селектор, обозначенный звездочкой (*), выбирает все элементы на странице.

Универсальный селектор может быть опущен, если для элемента применяется класс (class). Этот селектор часто используется для удаления полей (margin) по умолчанию или созданию отступов (padding) для быстрого тестирования.

Давайте рассмотрим следующий пример, чтобы понять, как это в основном работает:

* {
    margin: 0;
    padding: 0;
}

Правила стиля внутри селектора * будут применяться ко всем элементам в документе.

Селекторы типов элементов

Селектор типа элемента соответствует всем выбранным элементам в документе с соответствующим именем типа элемента. Давайте рассмотрим пример, чтобы увидеть, как это работает:

p {
    color: blue;
}

Правила для селектора p будут применяться ко всем элементам <p> (абзацам) в документе и окрашивать их в синий цвет, независимо от их положения в дереве документа.

Id Селекторы

Селектор идентификатора (id) используются для определения стилей для одного уникального элемента на странице.

Селектор идентификатора определяется знаком хештега (#), за которым сразу следует значение идентификатора.

#error {
    color: red;
}

Это правило отображает текст элемента красным цветом, для тега, атрибут id которого имеет значение error.

Class Селекторы

Селекторы класса могут использоваться для выбора группы HTML-элементов, которые имеют одинаковый класс. Все элементы, имеющие этот класс, будут отформатированы в соответствии с заданным правилом.

Селектор класса определяется знаком точки (.), за которым сразу следует значение класса.

.blue {
    color: blue;
}

Приведенные выше правила стиля отображают текст синим цветом для всех элементов в документе, у которых атрибут class установлен blue. Вместе с классом вы можете указывать и тип элемента, для того, чтобы сделать правило более конкретным. Например:

p.blue {
    color: blue;
}

Правило стиля внутри селектора p.blue отображает текст синим цветом только тех элементов <p>, у которых атрибут class установлен blue, и не влияет на другие абзацы, не имеющие этого класса.

Селекторы с потомками

Вы можете использовать эти селекторы, когда вам нужно выбрать элемент, который является потомком другого элемента. Например, если вы хотите выбрать только те ссылки <a>, которые содержатся в неупорядоченном списке <ul>, как показано в примере:

ul.menu li a {
    text-decoration: none;
}
h1 em {
    color: green;
}

Правила внутри селектора ul.menu li a применяются только к элементам <a>, которые содержатся внутри элемента <ul>, имеющего класс .menu, и не влияют на другие ссылки внутри документа. Свойство text-decoration: none отменяет подчеркивание у ссылок.

Аналогично, правила стиля внутри селектора h1 em будут применяться только к тем элементам <em>, которые содержатся внутри элементов <h1> и не влияют на другие элементы.

Дочерние селекторы

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

Дочерний селектор может состоять из двух и более селекторов, разделенных символом «больше» (>). Вы можете использовать этот селектор, например, для выбора первого уровня элементов во вложенном списке, который имеет больше одного уровня. Лучше рассмотрим пример, чтобы понять, как это работает:

ul > li {
    list-style: square;
}
ul > li ol {
    list-style: none;
}

Правило внутри селектора ul > li применяется только к тем элементам <li>, которые являются прямыми потомками элементов <ul> и не влияют на другие элементы списка.

Смежные селекторы

Смежные селекторы могут быть использованы для выбора родственных элементов (то есть элементов находящихся на одном уровне в дереве документа). Этот селектор имеет синтаксис: element-1 + element-2, где element-2 является целью селектора.

Селектор h1 + p в следующем примере выберет элемент <p> только в том случае, если оба элемента <h1> и <p> имеют одного и того же родителя в дереве документа, и <h1> находится непосредственно перед элементом <p>. Это означает, что только для абзаца, который идет сразу после каждого заголовка <h1>, будет изменен цвет и размер шрифта.

h1 + p {
    color: blue;
    font-size: 18px;
}
ul.task + p {
    color: #f0f;
    text-indent: 30px;
}

Общие смежные селекторы

Общий смежный селектор похож на предыдущий (element-1 + element-2), но он менее строг. Он так же состоит из двух простых селекторов, но разделенных символом тильды (∼). Запись может иметь вид: element-1 ~ element-2, где element-2 является целью селектора.

Селектор h1 ∼ p в приведенном ниже примере выберет все элементы <p>, которым предшествует элемент <h1>, где все элементы имеют одного и того же родителя в дереве документа.

h1 ∼ p {
    color: blue;
    font-size: 18px;
}
ul.task ∼ p {
    color: #f0f;
    text-indent: 30px;
}

По сути, ∼ отличается от +, тем, что ~ выберет все <p> после <h1>, а + выберет только первый элемент <p>.

Есть более сложные селекторы, такие как селекторы атрибутов, псевдоклассы, псевдоэлементы. Мы подробно обсудим эти селекторы в следующих главах.

Группировка селекторов

Часто несколько селекторов в таблице стилей используют одни и те же стилизационные правила. Вы можете сгруппировать их в список через запятую, чтобы минимизировать код в вашей таблице стилей. Это также даст вам возможность повторять одни и те же правила снова и снова. Посмотрим:

h1 {
    font-size: 36px;
    font-weight: normal;
}
h2 {
    font-size: 28px;
    font-weight: normal;
}
h3 {
    font-size: 22px;
    font-weight: normal;
}

Как вы можете заметить в приведенном выше примере, то же правило стиля font-weight: normal; используется селекторами h1, h2 и h3, поэтому его можно сгруппировать в список через запятую, например так:

h1, h2, h3 {
    font-weight: normal;
}
h1 {
    font-size: 36px;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 22px;
}