Селекторы

Andy Bell

Каким способом можно увеличить шрифт текста первого абзаца статьи и сделать его красным?

<article>
  <p>Шрифт этого абзаца должен быть красным и более крупным, чем в остальном тексте.</p>
  <p>Шрифт этого абзаца должен иметь нормальный размер и цвет, используемый по умолчанию.</p>
</article>

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

article p:first-of-type {
  color: red;
  font-size: 1.5em;
}

Для подобных ситуаций в CSS имеется множество способов выбора элементов и применения правил к ним — от очень простых до очень сложных.

Части правила CSS

Чтобы понять, как работают селекторы и какова их роль в CSS, важно знать части правила CSS. Правило CSS — это блок кода, в котором содержится один или несколько селекторов и одно или несколько объявлений.

В этом правиле CSS селектором является элемент .my-css-rule, который находит все элементы с классом my-css-rule на странице. В фигурных скобках содержатся три объявления. Объявление — это пара, состоящая из свойства и значения, благодаря которой можно применять стили к элементам, соответствующим селекторам. Правило CSS может иметь неограниченное количество объявлений и селекторов.

Простые селекторы

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

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

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

* {
  color: hotpink;
}

Благодаря этому правилу текст каждого элемента HTML на странице будет иметь ярко-розовый (hotpink) цвет.

Селектор типа

Селектор типа напрямую соответствует элементу HTML.

section {
  padding: 2em;
}

Благодаря этому правилу для всех сторон каждого элемента <section> атрибут отступа padding будет иметь значение 2em.

Селектор класса

Элемент HTML может содержать один или несколько элементов, определенных в его атрибуте class. Селектор класса соответствует любому элементу, к которому применен этот класс.

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

Любой элемент, к которому применен этот класс, будет окрашен в красный цвет:

.my-class {
  color: red;
}

Обратите внимание на то, что символ . имеется только в CSS, но не в HTML. Это связано с тем, что символ . указывает языку CSS, что необходимо сопоставить члены атрибутов класса. Это распространенный шаблон в CSS, когда специальный символ или набор символов используется для определения типов селекторов.

Элемент HTML, имеющий класс .my-class, по-прежнему будет соответствовать указанному выше правилу CSS, даже если у него есть несколько других классов. Пример:

<div class="my-class another-class some-other-class"></div>

Это связано с тем, что CSS ищет атрибут class, который содержит определенный класс, а не точно соответствует этому классу.

Селектор идентификатора

Элемент HTML с атрибутом id должен быть единственным элементом на странице с нужным значением идентификатора. Выбирайте элементы с помощью селектора идентификатора следующим образом:

#rad {
  border: 1px solid blue;
}

Этот код CSS задает синюю границу для элемента HTML, у которого атрибут id имеет значение rad. Пример:

<div id="rad"></div>

Как и в случае с селектором класса . используйте символ #, чтобы указать CSS, что нужно искать элемент, соответствующий следующему за ним атрибуту id.

Селектор атрибута

С помощью селектора атрибута можно выполнять поиск элементов, которые имеют определенный атрибут HTML или определенное значение атрибута HTML. Чтобы указать CSS, что нужно найти атрибуты, заключите селектор в квадратные скобки ([ ]).

[data-type='primary'] {
  color: red;
}

Этот код CSS ищет все элементы, у которых есть атрибут data-type со значением primary. Пример:

<div data-type="primary"></div>

Вместо того, чтобы искать конкретное значение атрибута data-type, можно также искать элементы, у которых имеется этот атрибут независимо от его значения.

[data-type] {
  color: red;
}

<div data-type="primary"></div>
<div data-type="secondary"></div>

Текст в обоих этих элементах <div> будет красным.

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

[data-type='primary' s] {
  color: red;
}

Это означает, что если бы у элемента HTML атрибут data-type имел значение Primary, а не primary, текст в нем не был бы красным. Можно сделать наоборот — отключить функцию учета регистра — с помощью оператора i.

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

/* Элемент href, содержащий адрес "example.com" */
[href*='example.com'] {
  color: red;
}

/* Элемент href, начинающийся с https */
[href^='https'] {
  color: green;
}

/* Элемент href, оканчивающийся на .com */
[href$='.com'] {
  color: blue;
}

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

Селектор необязательно должен соответствовать только одному элементу. Можно сгруппировать несколько селекторов, разделив их запятыми:

strong,
em,
.my-class,
[lang] {
  color: red;
}

В этом примере изменяется цвет как элементов <strong>, так и элементов <em>. Он также расширен и включает класс .my-class и элемент с атрибутом lang.

Check your understanding

Test your knowledge of simple selectors

* {}

div {}

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

В CSS имеются полезные типы селекторов, которые ориентированы на определенное состояние платформы, например на структуры внутри элемента или на части элемента, когда на элемент наведен указатель мыши.

Псевдоклассы

Элементы HTML могут находиться в разных состояниях потому что с ними взаимодействует пользователь либо потому что один из их дочерних элементов находится в том или ином состоянии.

Например, пользователь может навести указатель мыши как на сам элемент HTML, так и на его дочерний элемент. В таких ситуациях используйте псевдокласс :hover.

/* На нашу ссылку навели указатель мыши */
a:hover {
  outline: 1px dotted green;
}

/* Настройка другого цвета фона для всех четных абзацев */
p:nth-child(even) {
  background: floralwhite;
}

Дополнительные сведения см. в модуле, посвященном псевдоклассам.

Псевдоэлемент

Псевдоэлементы отличаются от псевдоклассов тем, что они не реагируют на состояние платформы, а действуют так, как если бы они вставляли новый элемент с помощью CSS. Кроме того, синтаксис псевдоэлементов отличается от синтаксиса псевдоклассов, потому что вместо одинарного двоеточия (:) в них используется двойное двоеточие (::).

.my-element::before {
  content: 'Prefix - ';
}

Как и в приведенной выше демонстрации, в которой вы указали тип файла в качестве префикса подписи ссылки, с помощью псевдоэлемента ::before можно вставить содержимое в начало элемента, а с помощью псевдоэлемента ::after — в конец элемента.

Перечень функций псевдоэлементов не ограничен вставкой содержимого. Их также можно использовать для нацеливания на определенные части элемента. Предположим, у вас есть список. С помощью псевдоэлемента ::marker можно применить стиль к каждому маркеру (или номеру) в списке.

/* Теперь в списке будут либо красные точки, либо красные номера */
li::marker {
  color: red;
}

Кроме того, с помощью псевдоэлемента ::selection можно применять стили к содержимому, выделенному пользователем.

::selection {
  background: black;
  color: white;
}

Подробные сведения см. в модуле о псевдоэлементах.

Check your understanding

Test your knowledge of pseudo selectors

p:hover {
  background: white;
  color: black;
}

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

Вы уже познакомились с большим количеством селекторов, но иногда требуется более детальный контроль с помощью CSS. В этом случае на помощь приходят сложные селекторы.

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

Комбинаторы

Комбинатор — это то, что находится между двумя селекторами. Например, если используется селектор p > strong, комбинатором будет символ >. Селекторы, в которых используются такие комбинаторы, позволяют выбирать элементы в зависимости от их расположения в документе.

Комбинатор потомков

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

<p>Абзац текста, часть которого <strong>выделена полужирным шрифтом</strong>.</p>

Родительский элемент — это элемент <p>, который содержит текст. Внутри этого элемента <p> находится элемент <strong>, благодаря которому шрифт заключенного в нем текста будет полужирным. Так как он находится внутри элемента <p>, он представляет собой дочерний элемент этого элемента.

Комбинатор потомков позволяет нам нацеливаться на дочерний элемент. В нем используется пробел (), указывающий браузеру искать дочерние элементы:

p strong {
  color: blue;
}

Этот фрагмент кода выбирает все элементы <strong>, которые являются дочерними элементами только для элементов <p> и рекурсивно делает их синими.

Этот эффект лучше визуализирован в примере выше, в котором используется селектор комбинаторов .top div. Это правило CSS добавляет левый отступ к этим элементам <div>. Так как комбинатор является рекурсивным, то ко всем элементам <div>, находящимся в элементе .top, будет применен одинаковый отступ.

Посмотрите на панель HTML в этой демонстрации, и вы увидите, что элемент .top имеет несколько дочерних элементов <div>, у которых, в свою очередь, есть дочерние элементы <div>.

Комбинатор следующего элемента одного уровня

С помощью символа + в селекторе можно выполнить поиск элемента, который следует непосредственно за другим элементом.

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

С помощью следующего селектора можно добавить поле ко всем дочерним элементам .top:

.top * {
  margin-top: 1em;
}

Проблема заключается в том, что, поскольку вы выбираете каждый дочерний элемент .top, это правило может создать дополнительное ненужное пространство. Комбинатор следующего элемента одного уровня в сочетании с универсальным селектором позволяет не только управлять тем, для каких элементов будет добавлено пространство, но и добавлять пространство к любому элементу. Это дает некоторую гибкость в долгосрочной перспективе независимо от того, какие элементы HTML будут встречаться в элементе .top.

Комбинатор последующего элемента одного уровня

Комбинатор последующего элемента очень похож на селектор следующего элемента одного уровня. Однако вместо символа + здесь используется символ ~. Отличие заключается в том, что элемент просто должен следовать за другим элементом с одинаковым родительским элементом, а не быть следующим элементом с тем же родителем.

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

Комбинатор дочернего элемента

Комбинатор дочернего элемента (также называемый прямым потомком) предоставляет дополнительные возможности управления рекурсией, которая применяется в селекторах комбинаторов. С помощью символа > можно использовать селектор комбинатора только для непосредственных дочерних элементов.

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

Чтобы смягчить последствия этой проблемы, измените селектор следующего элемента одного уровня, включив в него комбинатор дочернего элемента > * + *. Теперь это правило будет применяться только к непосредственным дочерним элементам элемента .top.

Составные селекторы

Вы можете сочетать селекторы, чтобы повысить уровень конкретности и удобочитаемость. Например, чтобы выполнить нацеливание на элементы <a>, которые также имеют класс .my-class, используйте следующий код:

a.my-class {
  color: red;
}

Этот код не будет применять красный цвет ко всем ссылкам; он будет применять красный цвет только к элементу .my-class, если он находится в элементе <a>. Дополнительные сведения об этом см. в модуле, посвященном специфичности.

Check your understanding

Test your knowledge of complex selectors

section.awesome {
  border: 1px solid hotpink;
}

Ресурсы

• Справочное руководство по селекторам CSS
• Интерактивная игра по селекторам
• Справочное руководство по псевдоклассам и псевдоэлементам
• Средство, которое переводит селекторы CSS в эксплейнеры на понятном английском языке