Селекторы CSS

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

Необходимые знания: Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML), и представление о том, как работает CSS (смотрите Введение в CSS).
Цель: Узнать, как работают CSS-селекторы.

Что такое селекторы?

Вы уже встерчались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.

Some code with the h1 highlighted.

Ранее Вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент h1 или класс .special.

В CSS селекторы определяются в спецификации CSS-селекторов; как и другие части CSS, нужно поддерживать их работу в браузерах. Большинство селекторов, которые Вы встретите, определены в Спецификации селекторов 3 уровня, где Вы сможете найти всю информацию о поддержке селекторов в браузерах.

Несколько селекторов

Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в лист селекторов: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка h1 и класса .special; я могу написать их так:

h1 { 
  color: blue; 
} 

.special { 
  color: blue; 
} 

А могу написать короче — просто отделив селекторы запятыми:

h1, .special { 
  color: blue; 
} 

Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:

h1, 
.special { 
  color: blue; 
} 

В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.

 

При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.

В примере ниже правило для селектора класса не будет работать, в то время как 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 { }

Продолжение

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

Справка о селекторах

В таблице ниже — доступные сейчас селекторы, а также ссылки к страницам, где рассказывается, как использовать каждый из них. Я также добавил ссылки на страницы MDN для каждого селектора, чтобы вы могли проверить, поддерживаются ли они браузерами.

Селектор Пример Руководство
Селектор по типу h1 {  } Селектор по типу
Универсальный селектор * {  } Универсальный селектор
Селектор класса .box {  } Селекторы классов
Селектор ID #unique { } Селекторы по ID
Селектор атрибутов a[title] {  } Селекторы атрибутов
Селектор псевдоклассов p:first-child { } Псевдоклассы
Селектор псевдоэлементов p::first-line { } Псевдоэлементы
Селектор потомков article p Селектор потомков
Селектор дочерних элементов article > p Селектор дочерних элементов
Смежные селекторы h1 + p Смежные селекторы
Селектор братских элементов h1 ~ p Селектор братских элементов

В этом модуле

  1. Каскад и наследование
  2. CSS-селекторы
  3. Блоки в CSS
  4. Фон и границы
  5. Изменение направления текста
  6. Перекрытие содержимого
  7. Значения свойств CSS
  8. Изменение размеров в CSS
  9. Изображения, формы и прочие медиа-элементы
  10. Стилизация таблиц
  11. Отладка CSS
  12. Организация CSS-кода