В {{Glossary("CSS")}}-селекторы используются для стилизации {{glossary("HTML")}} элементов на веб-странице. Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы в мельчайших подробностях рассмотрим разные их типы и увидим, как они работают.
| Необходимые знания: | Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML), и представление о том, как работает CSS (смотрите Введение в CSS). |
|---|---|
| Цель: | Узнать, как работают CSS-селекторы. |
Вы уже встерчались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.
Ранее Вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент h1 или класс .special.
В CSS селекторы определяются в спецификации CSS-селекторов; как и другие части CSS, нужно поддерживать их работу в браузерах. Большинство селекторов, которые Вы встретите, определены в Спецификации селекторов 3 уровня, где Вы сможете найти всю информацию о поддержке селекторов в браузерах.
Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в лист селекторов: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка h1 и класса .special; я могу написать их так:
h1 {
color: blue;
}
.special {
color: blue;
} А могу написать короче — просто отделив селекторы запятыми:
h1, .special {
color: blue;
} Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:
h1,
.special {
color: blue;
} В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.
{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}}
При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.
В примере ниже правило для селектора класса не будет работать, в то время как h1 будет стилизован.
h1 {
color: blue;
}
..special {
color: blue;
} Но если мы объединим селекторы, правило не применится ни к h1, ни к классу: оно считается недействительным.
h1, ..special {
color: blue;
} Понимание того, какой именно селектор вам нужен, очень помогает подобрать подходящий элемент. Сейчас мы разберём разные виды селекторов.
К этой группе относятся селекторы HTML-элементов, таких как <h1>.
h1 { }
К группе относятся и селекторы классов:
.box { }
или селекторы идентификаторов (ID):
#unique { }
Эта группа селекторов позволяет выбирать селекторы, основываясь на наличии у них конкретного атрибута элемента:
a[title] { }
или основываясь на значении атрибута:
a[href="https://example.com"] { }
К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс :hover, например, применяет правило, только если на элемент наведён курсор мыши
a:hover { }
К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, ::first-line всегда выбирает первую строку внутри элемента (абзаца <p> в нашем случае), действуя, как если бы тег <span> оборачивал первую строку, а затем был стилизован.
p::first-line { }
И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент <article> с помощью комбинатора дочерних элементов (>):
article > p { }
Ниже можно просмотреть таблицу различных видов селекторов с соответствующими ссылками, или Вы можете двинуться дальше: нас ждут селекторы тегов, классов и идентификаторов.
{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
В таблице ниже — доступные сейчас селекторы, а также ссылки к страницам, где рассказывается, как использовать каждый из них. Я также добавил ссылки на страницы MDN для каждого селектора, чтобы вы могли проверить, поддерживаются ли они браузерами.
| Селектор | Пример | Руководство |
|---|---|---|
| Селектор по типу | h1 { } |
Селектор по типу |
| Универсальный селектор | * { } |
Универсальный селектор |
| Селектор класса | .box { } |
Селекторы классов |
| Селектор ID | #unique { } |
Селекторы по ID |
| Селектор атрибутов | a[title] { } |
Селекторы атрибутов |
| Селектор псевдоклассов | p:first-child { } |
Псевдоклассы |
| Селектор псевдоэлементов | p::first-line { } |
Псевдоэлементы |
| Селектор потомков | article p |
Селектор потомков |
| Селектор дочерних элементов | article > p |
Селектор дочерних элементов |
| Смежные селекторы | h1 + p |
Смежные селекторы |
| Селектор братских элементов | h1 ~ p |
Селектор братских элементов |