Селекторы CSS. Полное руководство.

В этой статье я расскажу вам обо всех типах CSS-селекторов, которые доступны при написании современных стилей для веб-страниц. Знание полного спектра “селекторы CSS” крайне важно для использования CSS в полной мере.

За последние 10 лет официальная спецификация добавила множество различных типов CSS-селекторов, многие из которых имеют поддержку во всех современных браузерах. Так же рекомендую ознакомиться с руководством по CSS Grid и FlexBox CSS на моем блоге.

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

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

В CSS существует универсальный селектор, который выбирает все элементы на странице. Вы можете использовать его отдельно или в сочетании с другим селектором. Он объявляется с помощью символов звездочки (*).

* {
  box-sizing: border-box;
}

В приведенном выше примере универсальный селектор используется для выбора всех элементов на странице. Код задает элементам значение box-sizing равное border-box. Это распространенное использование универсального селектора, которое обеспечивает более интуитивный размер элементов страницы.

Если вы используете универсальный селектор в сочетании с другим селектором, это может выглядеть так:

section * {
  background: lightblue;
}

Приведенный выше пример выбирает все дочерние элементы (включая глубоко вложенные элементы) от элементов <section>. Еще один более сложный пример может выглядеть так:

footer * span {
  font-size: .8em;
}

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

Селектор по типу элемента

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

span {
  color: red;
}

article {
  margin-top: 20px;
}

Как вы видите я использую тэги span и article в качестве селекторов. Вы также можете технически придумать свои имена для тегов HTML и использовать их в CSS. Например, вы можете использовать следующий код HTML:

<geniuscourses>Hello, World!</geniuscourses>

А затем следующий CSS-код:

geniuscourses {
  color: green;
}

Хотя это и работает, рекомендуется избегать подобной практики. Если вам нужен общий HTML-элемент, используйте <div> или <span>, а затем добавляйте классы и атрибуты данных по мере необходимости для настройки стилей.

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

Классовый селектор – самый часто используемый и полезный тип селекторов в CSS. Он объявляется с помощью точки (.) и названия, которое должно существовать в атрибуте class в вашем HTML.

Например, у вас может быть следующий HTML-код:

<div class="module module-other">
  Hello
</div>

В CSS вы можете выбрать элемент выше с помощью классового селектора следующим образом:

.module {
  margin: 0 auto;
}

.module-other {
  max-width: 900px;
}

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

Классовый селектор является основой для методологий CSS, таких как OOCSS, BEM и SMACSS. Этот тип селекторов также является основой для популярных фреймворков CSS, таких как Bootstrap и Tailwind.

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

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

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

ID селектор определяется символом решетки (#), за которым следует уникальное имя. Этот селектор выберет HTML элемент, который использует то же имя, что и значение атрибута id.

В HTML это будет выглядеть так:

<div id="module">
  Hello
</div>

А вот следующий CSS выберет вышеуказанный элемент:

#module {
  width: 80%;
}

Однако, использование ID селектора крайне не рекомендуется по нескольким причинам:

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

Хотя большинство разработчиков сегодня отказываются от использования селектора ID, атрибут ID поощряется в HTML для определения якорей внутри страницы, а также для JavaScript-хуков. Вместо селектора ID следует использовать имена классов или другие селекторы.

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

Атрибутный селектор – это достаточно малоиспользуемый и недооцененный тип селектора в CSS. Его можно написать с помощью квадратных скобок ([]) и значение внутри скобок должно соответствовать атрибуту HTML.

Например, предположим, у вас есть следующий HTML:

<a href="about.html" title="About">О нас</a>

Теперь обратите внимание на следующий CSS:

a[title] {
  border-bottom: solid 1px black;
}

Этот CSS берет все элементы <a>, которые имеют атрибут title. Вы можете использовать только атрибутный селектор, без других селекторов:

[title] {
  border-bottom: solid 1px black;
}

Вышеуказанный пример применяет стили на все элементы, которые имеют атрибут title, независимо от их типа элемента.

Селекторы по атрибутам с операторами и флагами

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

Для выбора всех элементов <a>, у которых атрибут href начинается с # (символ решетки), используется оператор начала строки (^):

a[href^="#"] {
  color: red;
}

Для выбора всех элементов <a>, у которых атрибут href содержит слово “downloads“, используется оператор звездочки (*):

a[href*="downloads"] {
  color: red;
}

Чтобы выбрать все элементы <a> с атрибутом href, в котором содержится слово «downloads», независимо от регистра, используется флаг регистронезависимости (i):

a[href*="downloads" i] {
  color: red;
}

Для выбора всех элементов <a> с атрибутом href, содержащим слово «Blog», используется флаг чувствительности к регистру (s):

a[href*="Blog" s] {
  color: red;
}

Наконец, чтобы выбрать все элементы <a> с атрибутом href, заканчивающимся на “.pdf“, используется оператор конца строки ($):

a[href$=".pdf"] {
  color: red;
}

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

Селектор по вложенным потомкам

Дескриптор комбинаторов в CSS позволяет вам выбирать определенные элементы в контексте других элементов. Один из таких комбинаторов – комбинатор потомков, представленный пробелом между селекторами. Этот комбинатор позволяет выбирать все элементы-потомки определенных элементов.

Например, следующий код CSS выбирает все элементы ссылок, являющихся потомками элементов абзацев:

p a {
  line-height: 1.4;
}

Дочерние элементы – это непосредственные дети и любые внучатые элементы, независимо от того, насколько глубоко они вложены. Этот комбинатор очень полезен, когда вы хотите стилизовать определенные элементы только в определенных контекстах на вашей странице.

Селектор по прямым потомкам

Прямой дочерний комбинатор – это символ “больше” (>), который позволяет выбрать только прямых потомков элемента. Он похож на комбинатор потомка, но имеет более узкий охват.

Например, такой код:

p > a {
  line-height: 1.4;
}

Будет применять стили только к ссылкам, являющимся прямыми потомками элемента <p>. Ссылки, которые находятся внутри других элементов внутри <p>, не будут выбраны.

Комбинатор смежных селекторов

Общий селектор брата (смежный) определяется с помощью символа тильды (~). Он позволяет выбирать все элементы-братья, которые следуют за элементами, определенными селектором до тильды. При этом он не выбирает элементы-братья, которые находятся перед элементами, определенными селектором до тильды.

Например, следующий код выбирает все элементы <div>, которые следуют за .module и имеют с ним одного родителя (то есть они являются братьями):

.module ~ div {
  border: solid 1px;
}

Это означает, что в следующем HTML только последние два элемента <div> будут иметь стили, хотя первый <div> также является “братом”:

<div>
  <!-- этот див не попал -->
</div>

<section class="module">
  <!-- content... -->
</section>

<!-- следующие два дива попали -->
<div></div>
<div></div>

Комбинатор соседних элементов

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

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

p + p {
  text-indent: 1em;
}

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

Селекторы по псевдо-классам

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

Если псевдокласс следует сразу за другим селектором (например, a:link), он будет применен только к целевому селектору. Если между селектором и псевдоклассом есть пробел (a :link), то это два селектора, разделенных комбинатором потомства.

Ниже приведен список наиболее распространенных псевдоклассов и их краткое описание:

• :link – стилизует непосещенные ссылки.
• :visited – стилизует посещенные ссылки, с некоторыми ограничениями из-за конфиденциальности.
• :target – стилизует часть документа на основе фрагмента документа в URL, подобно тому, как это делается на Википедии со сносками.
• :root – стилизует корневой элемент документа, обычно элемент <html>.
• :nth-child – позволяет выбирать конкретные элементы с помощью математических обозначений или ключевых слов (odd и even), часто используется для создания зебровых полос с помощью CSS.
• :first-child – выбирает первый дочерний элемент родительского элемента.
• :last-child – выбирает последний дочерний элемент родительского элемента.
• :nth-of-type – позволяет выбирать конкретные элементы с помощью математических обозначений и ключевых слов (odd и even) среди группы.
• :hover – стилизует элементы, на которые наведен курсор мыши.
• :active – выбирает элемент, который в настоящее время “активирован”, обычно посредством щелчка мыши.
• :focus – соответствует элементу, который в данный момент имеет фокус, обычно посредством клавиатуры или щелчка мыши.
• :disabled – выбирает любые отключенные элементы (например, элементы формы, радиокнопки и т.д.).
• :checked – выбирает переключатели и флажки в состоянии “выбран” или “отмечен”.
• :required – выбирает элементы формы, для которых установлен атрибут “required”.

Селекторы по псевдо-элементам

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

Самые распространенные псевдо-элементы:

• ::before – добавляет псевдоэлемент внутри элемента, но перед содержимым целевого элемента.
• ::after – добавляет псевдоэлемент после содержимого целевого элемента.
• ::first-letter – стилизует первую букву первой строки целевого блочного элемента.
• ::first-line – стилизует первую строку целевого блочного элемента.
• ::placeholder – позволяет стилизовать текст заполнителя, который появляется внутри поля ввода формы.
• ::selection – стилизует выделенный пользователем текст на странице.
• ::marker – целевой элемент “маркера”, т.е. место, где появляется “буллет”, что позволяет добавить пользовательский маркер, номер или буллет.

Однако следует использовать псевдоэлементы с осторожностью, особенно ::before и ::after, так как они могут вводить текстовое содержимое на страницу, которое недоступно для программ чтения с экрана. Поэтому эти селекторы следует использовать только для декоративных элементов, которые не являются ключевыми для основного содержимого.

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

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

Комбинация типов селекторов

CSS-селекторы могут быть объединены для создания различных возможностей при выборе элементов. Простые селекторы включают один элемент (например, article). Сложные селекторы используют комбинаторы для разделения двух или более селекторов (например, article > p + span).

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

article, section, div {
  margin-top: 1em;
}

Таким образом, если у страницы нет элементов <section>, она все еще будет выбирать элементы <article> и <div>. Это общая техника, которая позволяет избежать повторения CSS для нескольких правил выбора.

Селекторы CSS 4-го уровня

Заключение. Селекторы CSS.

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

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

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