Селекторы CSS для использования в JavaScript (querySelectorAll)

Оглавление

1. Селекторы JavaScript для использования с querySelectorAll

2. Как получить селектор элемента в веб-браузере

2.1 Как получить селектор элемента в Google Chrome / Chromium

2.2 Как получить селектор элемента в Firefox

3. Краткая сводка селекторов CSS

4. Подробное описание CSS селекторов с примерами

4.1 Что такое CSS селектор?

4.2 Типы селекторов. Селекторы типа, класса и идентификатора

4.3 Селекторы HTML тегов (Селекторы типа)

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

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

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

4.7 Списки селекторов

4.8 Селекторы атрибутов

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

4.10 Комбинаторы

5. Документация по селекторам CSS

---

1. Селекторы JavaScript для использования с querySelectorAll

Селекторы CSS используются для указания наборов правил как должен выглядеть тот или иной элемент в HTML (DOM). Вы встречались с селекторами CSS в файлах .css, а также внутри тегов style.

Кроме этого варианта использования, JavaScript имеет целый ряд методов, которые позволяют манипулировать селекторами:

querySelector()
querySelectorAll()
getElementByID()
getElementsByClassName()
getElementsByName()
getElementsByTagName()
getElementsByTagNameNS()

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

querySelectorAll()

При использовании селекторов, JavaScript может не только менять внешний вид элементов DOM, но и выполнять другие манипуляции с ними, например, назначать элементам определённые события и действия, вставить новые элементы после указанного элемента, удалить определённые элементы, либо выбрать элементы по определённым критериям и выполнить с ними указанные действия.

Причём на реальных веб-сайтах селекторы определённых элементов для использования в JavaScript могут выглядеть так:

#content > article > section:nth-child(4) > div > div > pre > code > span:nth-child(4)

Или даже так:

#__layout > div > div.c-layoutDefault_page > main > div > div > div.c-scrollPercent > div.c-pageTopic.g-grid-container > div > div:nth-child(2) > div:nth-child(2) > div.lg\:u-col-12.md\:u-col-6.sm\:u-col-2 > div:nth-child(2) > div.g-grid-container.u-grid-columns > div.lg\:u-col-8.md\:u-col-6.sm\:u-col-2 > div > div.c-loadMoreButton.u-grid-columns > a > span.c-loadMoreButton_text

Давайте разберёмся, что означают эти записи.

Но сначала мы научимся небольшому трюку — как узнать селектор любого элемента на странице, чтобы использовать это значение с querySelectorAll().

2. Как получить селектор элемента в веб-браузере

2.1 Как получить селектор элемента в Google Chrome / Chromium

1. Перейдите в DevTools. Это можно сделать несколькими способами, например, нажмите F12, либо кликните правой кнопкой мыши по веб-странице и выберите в контекстном меню «Просмотреть код» (в английской версии это «Inspect»).

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

В буфере обмена будет сохранена строка, что-то вроде такого:

#content > div.entry-content > p:nth-child(50)

2.2 Как получить селектор элемента в Firefox

1. Перейдите в DevTools. Это можно сделать несколькими способами, например, нажмите F12, либо кликните правой кнопкой мыши по веб-странице и выберите в контекстном меню «Исследовать» (в английской версии это «Inspect»).

2. Кликните правой кнопкой по интересующему элементу, для которого вы хотите узнать селектор и в контекстном меню выберите Copy → Css Selector

В буфере обмена будет сохранена строка, что-то вроде такого:

#content > div.entry-content > p:nth-child(50)

3. Краткая сводка селекторов CSS

Начнём с краткой сводки значений селекторов и комбинаторов (это то, что показывает отношения между селекторами).

Селекторы могут быть следующих типов:

• HTML теги (например, p, pre, strong, em, code, ul, li, table, button и многие другие)
• классы
• ID
• свойства HTML тегов (например, scr, href и другие
• псевдоклассы

Описание	Примеры	Значение
Простые селекторы
Имя тега HTML без знаковм меньше и больше	button p pre strong em	Все элементы относящиеся к этому тегу
Название класса, начинающееся с точки	.class-name	Все элементы с этим именем класса
Уникальный ID, начинающийся со знака «#»	#unique-ID	Элемент с указанным ID (должен быть только один на странице)
Списки селекторов
Имена тегов, классов, ID перечисленные через запятую	p, pre, .class-name, #unique-ID h1, .special strong, em	Все элементы из этого списка, не смотря на их взаимоотношения
Универсальный селектор
Звёздочка	*	Все элементы
Составные селекторы
Имя класса и ещё одно или более имён классов без пробела	.notebox.danger .notebox.warning.anything	Элемент относится ко всем перечисленным классам.
Имя тега и затем имя класса	span.highlight h1.highlight	Указанный HTML тег, который также относится к указанному классу.
Имя тега и затем ID	h1#heading	Указанный HTML тег, который также имеет указанный ID.
Имя тега и затем ID и затем имя класса	h1#heading.highlight	Указанный HTML тег, который также имеет указанный ID и относится у казанному классу.
Селекторы атрибутов
Тег HTML, а затем квадратные скобки с именем свойства тега (которым может быть именем класса)	li[class] a[href] img[src]	Указанный тег, который также имеет указанное свойство.
Тег HTML, а затем квадратные скобки с именем свойства тега и знаком равно	li[class="a"] a[href="https://example.com"]	Соответствует элементам с указанным атрибутом, значение которого равно строке внутри кавычек.
Тег HTML, а затем квадратные скобки с именем свойства тега и знаками тильда и равно	li[class~="a"]	Соответствует элементам с указанным атрибутом, значение которого равно строке внутри кавычек или содержит значение в списке значений (разделённых пробелами).
Тег HTML, а затем квадратные скобки с именем свойства тега и знаками каретка и равно	li[class^="box-"]	Соответствует элементам с указанным атрибутом, значение которого начинается с указанной строки.
Тег HTML, а затем квадратные скобки с именем свойства тега и знаками доллар и равно	li[class$="-box"]	Соответствует элементам с указанным атрибутом, значение которого заканчивается указанной строкой.
Тег HTML, а затем квадратные скобки с именем свойства тега и знаками звёздочка и равно	li[class*="box"]	Соответствует элементам с указанным атрибутом, значение которого содержит указанную строку в любом месте.
Тег HTML, а затем квадратные скобки с именем свойства тега и знаками труба и равно	div[lang|="zh"]	Соответствует элементам с указанным атрибутом, значение которого равно строке внутри кавычек или начинается с этого значения, за которым сразу следует дефис.
Тег HTML, а затем квадратные скобки с именем свойства и условием поиска, за которыми через пробел указана буква «i»	li[class^="a" i]	Сопоставлять значения атрибутов без учёта регистра
Селекторы псевдоклассов
Тег HTML, а затем двоеточие и строка без пробелов	a:link a:visited a:hover	Указанный тег, который также относится к указанному псевдоклассу.
	p:nth-child(1) li:nth-child(-n + 3) li:nth-child(even) tr:nth-child(even)  tr:nth-child(2n) li:nth-last-child(-n + 3) li:nth-last-child(even)
Селекторы псевдоэлементов
Имя тега или имя класса за которым два символа двоеточия и строка	p::first-line .box::before .box::after .box::before	Псевдоэлемент указанного тега или класса.
Имя тега или имя класса за которым одно двоеточия со строкой и затем два символа двоеточия и строка	p:first-child::first-line	Псевдокласс псевдоэлемента указанного тега или класса.
Комбинированные селекторы
Два селектора через пробел ( )	body article p .box p	Соответствует последнему селектору только если в качестве предков (необязательно непосредственных) имеются предыдущие элементы в указанном порядке.
Два селектора через знак больше (>)	article > p ul > li	Соответствует последнему селектору только если в качестве предков (обязательно непосредственных) имеются предыдущие элементы в указанном порядке.
Два селектора через знак плюс (+)	p + img h1 + p	Соответствует последнему селектору только если этот элемент следует сразу за первым в HTML коде (хотя и не является потомком).
Два селектора через знак тильда (~)	p ~ img h1 ~ p	Соответствует последнему селектору если этот элемент следует первым в HTML коде (хотя и не является потомком, и не обязательно является смежным).

4. Подробное описание CSS селекторов с примерами

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

4.1 Что такое CSS селектор?

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

Существуют селекторы различных типов, которые выбирают документ разными способами – например, выбирая HTML тег, такой как h1, или класс, такой как .special.

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

4.2 Типы селекторов

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

Селекторы типа, класса и идентификатора

Селекторы типа (селекторы HTML тегов) нацелены на элемент HTML, такой как <h1> (пишутся как имя HTML тега без знака меньше и знака больше, в которые они помещаются в HTML коде):

h1 {
}

Селекторы класса нацелены на элемент, имеющий определённое значение для своего атрибута класса (пишутся как имя класса, перед которым поставлена точка):

.box {
}

Селекторы идентификатора нацелены на элемент, имеющий определённое значение для своего атрибута id (пишутся как имя ID, перед которым поставлен символ #):

#unique {
}

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

Эта группа селекторов даёт вам различные способы выбора элементов на основе наличия определённого атрибута у элемента:

a[title] {
}

Или даже сделать выбор на основе наличия атрибута с определенным значением:

a[href="https://example.com"]
{
}

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

Эта группа селекторов включает псевдоклассы, которые стилизуют определённые состояния элемента. Например, псевдокласс :hover выбирает элемент только при наведении на него указателя мыши:

a:hover {
}

Он также включает псевдоэлементы, которые выбирают определённую часть элемента, а не сам элемент. Например, ::first-line всегда выбирает первую строку текста внутри элемента (<p> в приведённом ниже случае), действуя так, как если бы <span> был обернут вокруг первой отформатированной строки, а затем выбран.

p::first-line {
}

Комбинаторы

Последняя группа селекторов объединяет другие селекторы для выбора элементов в наших документах. Например, следующий пример выбирает абзацы, которые являются прямыми потомками элементов <article>, с помощью дочернего комбинатора (>):

article > p {
}

4.3 Селекторы HTML тегов (Селекторы типа)

Селектор типа иногда называют селектором имени тега или селектором элемента, потому что он выбирает HTML тег/элемент в вашем документе. Селекторы типа не чувствительны к регистру. В примере ниже мы использовали селекторы span, em и strong.

Попробуйте добавить правило CSS для выбора элемента <h1> и изменить его цвет на синий:

<style>
body {
  font-family: sans-serif;
}

span {
  background-color: yellow;
}

strong {
  color: rebeccapurple;
}

em {
  color: rebeccapurple;
}
</style>

<h1>Type selectors</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo melon azuki
  bean garlic.
</p>

<p>
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

<p>
  Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce
  kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
  purslane kale. Celery potato scallion desert raisin horseradish spinach
</p>

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

Селектор классов, чувствительный к регистру, начинается с точки (.). Он выберет всё в документе, к чему применён этот класс. В приведённом ниже примере мы создали класс под названием highlight и применили его к нескольким местам в документе. Все элементы, к которым применён этот класс, станут выделенными на веб-странице.

<style>
body {
  font-family: sans-serif;
}

.highlight {
  background-color: yellow;
}
</style>

<h1 class="highlight">Class selectors</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi
  tomatillo melon azuki bean garlic.
</p>

<p class="highlight">
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

Нацеливание классов на определённые элементы

Вы можете создать селектор, который будет нацеливаться на определённые элементы с примененным классом. В следующем примере мы выделим <span> с классом highlight иначе, чем заголовок <h1> с классом highlight. Мы сделаем это, используя селектор типа для элемента, на который мы хотим нацелиться, с классом, добавленным с помощью точки, без пробелов между ними.

<style>
body {
  font-family: sans-serif;
}

span.highlight {
  background-color: yellow;
}

h1.highlight {
  background-color: pink;
}
</style>

<h1 class="highlight">Class selectors</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi
  tomatillo melon azuki bean garlic.
</p>

<p class="highlight">
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

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

Нацеливание на элемент, если к нему применено более одного класса

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

В примере ниже у нас есть <div>, содержащий заметку. Серая рамка применяется, когда у блока есть класс notebox. Если у него также есть класс warning или danger, мы меняем border-color.

Мы можем сообщить браузеру, что хотим сопоставить элемент, только если к нему применены два класса, связав их вместе без пробелов между ними. Вы увидите, что к последнему <div> не применяется никакой стиль, так как у него есть только класс danger; а ему также нужен notebox, чтобы что-либо применить.

<style>
body {
  font-family: sans-serif;
}

.notebox {
  border: 4px solid #666;
  padding: 0.5em;
  margin: 0.5em;
}

.notebox.warning {
  border-color: orange;
  font-weight: bold;
}

.notebox.danger {
  border-color: red;
  font-weight: bold;
}
</style>

<div class="notebox">This is an informational note.</div>

<div class="notebox warning">This note shows a warning.</div>

<div class="notebox danger">This note shows danger!</div>

<div class="danger">
  This won't get styled — it also needs to have the notebox class
</div>

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

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

<style>
body {
  font-family: sans-serif;
}

#one {
  background-color: yellow;
}

h1#heading {
  color: rebeccapurple;
}
</style>

<h1 id="heading">ID selector</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>

<p id="one">
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

Предупреждение: использование одного и того же идентификатора несколько раз в документе может показаться подходящим для целей стилизации, но не делайте этого. Это приведёт к недопустимому коду и вызовет странное поведение во многих местах.

Примечание: селектор идентификатора имеет высокую специфичность. Это означает, что стили, применённые на основе соответствия селектору идентификатора, будут переопределять стили, применённые на основе другого селектора, включая селекторы классов и типов. Поскольку идентификатор может встречаться на странице только один раз, а селекторы идентификаторов имеют высокую специфичность, предпочтительнее добавлять к элементу класс вместо идентификатора. Если использование идентификатора является единственным способом нацеливания на элемент (возможно, потому что у вас нет доступа к разметке и вы не можете её редактировать), рассмотрите возможность использования идентификатора в селекторе атрибутов, например p[id="header"].

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

Универсальный селектор обозначается звёздочкой (*). Он выбирает всё в документе. Если * соединено с помощью комбинатора потомков, он выбирает все внутри этого элемента-предка. Например, p * выбирает все вложенные элементы в элементе <p>.

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

<style>
body {
  font-family: sans-serif;
}

* {
  margin: 0;
}
</style>

<h1>Universal selector</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo melon azuki
  bean garlic.
</p>

<p>
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

Такое поведение иногда можно увидеть в «сбросе таблиц стилей», которые удаляют весь стиль браузера. Поскольку универсальный селектор вносит глобальные изменения, мы используем его для очень специфических ситуаций, таких как описанная ниже.

Использование универсального селектора для упрощения чтения селекторов

Одно из применений универсального селектора – сделать селекторы более удобными для чтения и более очевидными с точки зрения того, что они делают. Например, если мы хотим выбрать любые элементы-потомки элемента <article>, которые являются первыми потомками своего родителя, включая прямых потомков, и сделать их жирными, мы можем использовать псевдокласс :first-child (мы узнаем об этом больше в разделе о псевдоклассах и псевдоэлементах). Итак, в следующем примере применён селектор потомков вместе с селектором элемента <article>:

article :first-child {
  font-weight: bold;
}

Однако этот селектор можно спутать с article:first-child, который выберет любой элемент <article>, который является первым потомком другого элемента.

Чтобы избежать этой путаницы, мы можем добавить универсальный селектор к псевдоклассу :first-child, чтобы было более очевидно, что делает селектор. Он выбирает любой элемент, который является первым потомком элемента <article> или первым потомком любого элемента-потомка <article>:

article *:first-child {
  font-weight: bold;
}

Хотя оба делают одно и то же, читабельность значительно улучшается.

4.7 Списки селекторов

Если у вас есть более одного элемента (тег, класс, идентификатор), который использует один и тот же CSS стиль, то отдельные селекторы можно объединить в список селекторов, чтобы правило применялось ко всем отдельным селекторам. Например, если у меня есть тот же CSS для h1, а также класс .special, я мог бы записать это как два отдельных правила.

h1 {
  color: blue;
}

.special {
  color: blue;
}

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

h1, .special {
  color: blue;
}

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

h1,
.special {
  color: blue;
}

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

<style>
body {
  font-family: sans-serif;
}
span {
  background-color: yellow;
}

strong {
  color: rebeccapurple;
}

em {
  color: rebeccapurple;
}
</style>

<h1>Type selectors</h1>
<p>
  Veggies es bonus vobis, proinde vos postulo essum magis
  <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo melon azuki
  bean garlic.
</p>

<p>
  Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley
  shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra
  wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>

<p>
  Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce
  kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
  purslane kale. Celery potato scallion desert raisin horseradish spinach
</p>

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

В следующем примере недействительное правило селектора класса будет проигнорировано, тогда как h1 все равно будет стилизован.

h1 {
  color: blue;
}

..special {
  color: blue;
}

Однако при объединении действительного и недействительного селектора, ни h1, ни класс с неправильным именем не будут стилизованы, поскольку всё правило считается недействительным.

h1, ..special {
  color: blue;
}

4.8 Селекторы атрибутов

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

Селекторы присутствия и значения

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

Селектор	Пример	Описание
[*attr*]	a[title]	Соответствует элементам с атрибутом attr (имя которого – значение в квадратных скобках).
[*attr*=*value*]	a[href="https://example.com"]	Соответствует элементам с атрибутом attr, значение которого равно значению – строке внутри кавычек.
[*attr*~=*value*]	p[class~="special"]	Соответствует элементам с атрибутом attr, значение которого равно значению или содержит значение в списке значений (разделённых пробелами).
[*attr*|=*value*]	div[lang|="zh"]	Соответствует элементам с атрибутом attr, значение которого равно значению или начинается со значения, за которым сразу следует дефис.

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

• Используя li[class], мы можем сопоставить любой элемент списка с атрибутом класса. В следующем примере под это правило подпадают все элементы списка, кроме первого.
• li[class="a"] сопоставляет селектор с классом a, но при условии, что отсутствуют другие классы, разделённые пробелом. В следующем примере под этот селектор подпадает второй элемент списка.
• li[class~="a"] будет соответствовать классу a, а также значению, которое содержит класс a как часть списка, разделённого пробелами. В следующем примере под этот селектор подпадают второй и третий элементы списка.

<style>
body {
  font-family: sans-serif;
}
li[class] {
  font-size: 120%;
}

li[class="a"] {
  background-color: yellow;
}

li[class~="a"] {
  color: red;
}
</style>

<h1>Attribute presence and value selectors</h1>
<ul>
  <li>Item 1</li>
  <li class="a">Item 2</li>
  <li class="a b">Item 3</li>
  <li class="ab">Item 4</li>
</ul>

 

Селекторы соответствия подстрок

Эти селекторы позволяют выполнять более продвинутое сопоставление подстрок внутри значения вашего атрибута. Например, если у вас есть классы box-warning и box-error и вы хотите сопоставить всё, что начинается со строки "box-", вы можете использовать [class^="box-"], чтобы выбрать их оба (или [class|="box"], как описано в таблице выше).

Селектор	Пример	Описание
[attr^=value]	li[class^="box-"]	Сопоставляет элементы с атрибутом attr, значение которого начинается с value.
[attr$=value]	li[class$="-box"]	Сопоставляет элементы с атрибутом attr, значение которого заканчивается на value.
[attr*=value]	li[class*="box"]	Сопоставляет элементы с атрибутом attr, значение которого содержит value в любом месте строки.

(Отступление: может быть полезно отметить, что ^ и $ уже долгое время используются в качестве якорей в так называемых регулярных выражениях для обозначения «начинается с» и «заканчивается на» соответственно.)

Следующий пример показывает использование этих селекторов:

• li[class^="a"] соответствует любому значению атрибута, которое начинается с a, поэтому соответствует первым двум элементам списка в примере ниже.
• li[class$="a"] соответствует любому значению атрибута, которое заканчивается на a, поэтому соответствует первому и третьему элементу списка в примере ниже.
• li[class*="a"] соответствует любому значению атрибута, где a появляется в любом месте строки, поэтому соответствует всем элементам нашего списка в примере ниже.

<style>
body {
  font-family: sans-serif;
}
li[class^="a"] {
  font-size: 120%;
}

li[class$="a"] {
  background-color: yellow;
}

li[class*="a"] {
  color: red;
}
</style>

<h1>Attribute substring matching selectors</h1>
<ul>
  <li class="a">Item 1</li>
  <li class="ab">Item 2</li>
  <li class="bca">Item 3</li>
  <li class="bcabc">Item 4</li>
</ul>

Чувствительность к регистру

Если вы хотите сопоставлять значения атрибутов без учёта регистра, вы можете использовать значение i перед закрывающей скобкой. Этот флаг сообщает браузеру, что символы ASCII должны сопоставляться без учёта регистра. Без флага значения будут сопоставляться в соответствии с чувствительностью к регистру языка документа — в случае HTML он будет чувствителен к регистру.

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

<style>
body {
  font-family: sans-serif;
}
li[class^="a"] {
  background-color: yellow;
}

li[class^="a" i] {
  color: red;
}
</style>

<h1>Case-insensitivity</h1>
<ul>
  <li class="a">Item 1</li>
  <li class="A">Item 2</li>
  <li class="Ab">Item 3</li>
</ul>

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

Резюме

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

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

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

Что такое псевдокласс?

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

Псевдоклассы – это ключевые слова, которые начинаются с двоеточия. Например, :hover — это псевдокласс.

Простой пример псевдокласса

Давайте рассмотрим простой пример. Если мы хотим сделать первый абзац в статье больше и жирнее, мы можем добавить класс к этому абзацу, а затем добавить CSS к этому классу, как показано в первом примере ниже:

<style>
.first {
  font-size: 120%;
  font-weight: bold;
}
</style>

<article>
  <p class="first">
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</article>

Однако это может быть неудобно в обслуживании – что, если новый абзац будет добавлен в начало документа? Нам нужно будет переместить класс в новый абзац. Вместо добавления класса мы можем использовать селектор псевдокласса :first-child – он всегда будет нацелен на первый дочерний элемент в статье, и нам больше не нужно будет редактировать HTML (в любом случае это не всегда возможно возможно, например, это может быть затруднительно, если он генерируется CMS).

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

• :last-child
• :only-child
• :invalid

Примечание: допустимо писать псевдоклассы и элементы без какого-либо селектора элемента перед ними. В приведённом выше примере вы можете написать :first-child, и правило будет применяться к любому элементу, который является первым дочерним элементом элемента <article>, а не только к первому дочернему элементу абзаца – :first-child эквивалентно *:first-child. Однако обычно требуется больше контроля, поэтому нужно быть более конкретным.

Псевдоклассы действий пользователя

Некоторые псевдоклассы применяются только тогда, когда пользователь каким-либо образом взаимодействует с документом. Эти псевдоклассы действий пользователя, иногда называемые динамическими псевдоклассами, действуют так, как будто класс был добавлен к элементу, когда пользователь взаимодействует с ним. Вот некоторые примеры:

• :hover – применяется только в том случае, если пользователь перемещает (наводит) указатель мыши на элемент, обычно ссылку.
• :focus – применяется только в том случае, если пользователь фокусируется на элементе, щёлкнув или используя элементы управления с клавиатуры.

<style>
a:link,
a:visited {
  color: rebeccapurple;
  font-weight: bold;
}

a:hover {
  color: hotpink;
}
</style>

<p><a href="">Hover over me</a></p>

Что такое псевдоэлемент?

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

Псевдоэлементы начинаются с двойного двоеточия ::. Примером псевдоэлемента является ::before.

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

Например, если вы хотите выбрать первую строку абзаца, вы можете обернуть её в элемент <span> и использовать селектор элемента; однако это не сработает, если количество слов, которые вы обернули, будет длиннее или короче ширины родительского элемента. Поскольку мы, как правило, не знаем, сколько слов поместится в строке – да и в любом случае первая строка станет другой, если изменится ширина экрана или размер шрифта – то есть вручную это невозможно сделать надёжно.

Селектор псевдоэлемента ::first-line надёжно сделает это за вас – если количество слов увеличится или уменьшится, он все равно выберет только первую строку.

Он действует так, как будто <span> магическим образом обернут вокруг этой первой отформатированной строки и обновляется каждый раз при изменении длины строки.

Вы можете видеть, что следующий пример выбирает первую строку обоих абзацев.

<style>
article p::first-line {
  font-size: 120%;
  font-weight: bold;
}
</style>

<article>
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</article>

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

Если вы хотите сделать первую строку первого абзаца жирной, вы можете объединить селекторы :first-child и ::first-line вместе. Попробуйте отредактировать предыдущий пример так, чтобы он использовал следующий CSS. Этим кодом мы говорим, что хотим выбрать первую строку первого элемента <p>, который находится внутри элемента <article>.

article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}

Генерация контента с помощью ::before и ::after

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

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

<style>
.box::before {
  content: "This should show before the other content. ";
}
</style>

<p class="box">Content in the box in my HTML page.</p>

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

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

<style>
.box::after {
  content: " ➥";
}
</style>

<p class="box">Content in the box in my HTML page.</p>

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

В следующем примере мы добавили пустую строку с помощью псевдоэлемента ::before. Мы установили его в display: block, чтобы мы могли стилизовать его с шириной и высотой. Затем мы используем CSS, чтобы стилизовать его так же, как любой другой элемент. Вы можете поиграть с CSS и изменить его внешний вид и поведение.

<style>
.box::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  border: 1px solid black;
}
</style>

<p class="box">Content in the box in my HTML page.</p>

Использование псевдоэлементов ::before и ::after вместе со свойством content называется «Сгенерированным содержимым» в CSS, и вы часто будете видеть, как этот метод используется для различных задач. Отличным примером является сайт CSS Arrow Please, который помогает вам генерировать стрелку с помощью CSS. Посмотрите на CSS, когда вы создаёте свою стрелку, и вы увидите, как используются псевдоэлементы ::before и ::after. Всякий раз, когда вы видите эти селекторы, смотрите на свойство content, чтобы увидеть, что добавляется к элементу HTML.

Резюме

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

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

4.10 Комбинаторы

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

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

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

body article p {

}

В примере ниже мы сопоставляем только элемент <p>, который находится внутри элемента с классом .box.

<style>
.box p {
  color: red;
}
</style>

<div class="box"><p>Text in .box</p></div>
<p>Text not in .box</p>

Дочерний комбинатор

Дочерний комбинатор (>) размещается между двумя селекторами CSS. Он сопоставляет только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому. Элементы-потомки, расположенные ниже по иерархии, не сопоставляются. Например, чтобы выбрать только элементы <p>, которые являются прямыми потомками элементов <article>:

article > p

В следующем примере у нас есть упорядоченный список (<ol>), вложенный в неупорядоченный список (<ul>). Дочерний комбинатор выбирает только те элементы <li>, которые являются прямыми потомками <ul>, и стилизует их с верхней границей.

<style>
ul > li {
  border-top: 5px solid red;
}
</style>

<ul>
  <li>Unordered item</li>
  <li>
    Unordered item
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
    </ol>
  </li>
</ul>

Если вы удалите >, который обозначает его как дочерний комбинатор, вы получите селектор потомка, и все элементы <li> получат красную границу.

Следующий-родственный комбинатор

Следующий-родственный комбинатор (+) размещается между двумя селекторами CSS. Он соответствует только тем элементам, которые соответствуют второму селектору, которые являются следующим родственным элементом первого селектора. Например, чтобы выбрать все элементы <img>, которым непосредственно предшествует элемент <p>:

p + img

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

Если вы вставите какой-либо другой элемент, например <h2>, между <h1> и <p>, вы обнаружите, что абзац больше не соответствует селектору и, следовательно, не получает цвет фона и переднего плана, применяемый, когда элемент является смежным.

<style>
body {
  font-family: sans-serif;
}

h1 + p {
  font-weight: bold;
  background-color: #333;
  color: #fff;
  padding: 0.5em;
}
</style>

<article>
  <h1>A heading</h1>
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</article>

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

Если вы хотите выбрать элементы одного уровня элемента, даже если они не являются непосредственно смежными, вы можете использовать комбинатор последующих элементов (~). Чтобы выбрать все элементы <img>, которые находятся где-либо после элементов <p>, мы сделаем следующее:

p ~ img

В примере ниже мы выбираем все элементы <p>, которые находятся после <h1>, и хотя в документе также есть <div>, выбирается <p>, который находится после него.

<style>
body {
  font-family: sans-serif;
}

h1 ~ p {
  font-weight: bold;
  background-color: #333;
  color: #fff;
  padding: 0.5em;
}
</style>

<article>
  <h1>A heading</h1>
  <p>I am a paragraph.</p>
  <div>I am a div</div>
  <p>I am another paragraph.</p>
</article>

Создание сложных селекторов с вложением

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

p {
  ~ img {
  }
}
/* Это то, как предыдущее правило будет понято веб-браузером */
p ~ img {
}

Селектор вложенности & также можно использовать для создания сложных селекторов:

p {
  & img {
  }
}
/* Это то, как предыдущее правило будет понято веб-браузером */
p img {
}

Вот пример, демонстрирующий сложные селекторы:

<style>
body {
  font-family: sans-serif;
}

h1 {
  & ~ p {
    /* это понимается веб-браузером как h1 ~ p */
    font-weight: bold;
    background-color: #333;
    color: #fff;
    padding: 0.5em;
  }
}
</style>

<article>
  <h1>A heading</h1>
  <p>I am a paragraph.</p>
  <div>I am a div</div>
  <p>I am another paragraph.</p>
</article>

Примечание: в приведённом выше примере селектор вложенности & не требуется, но его добавление помогает явно показать, что используется вложенность CSS.

Использование комбинаторов

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

ul > li[class="a"] {
}

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

Часто лучше создать простой класс и применить его к рассматриваемому элементу. Тем не менее, ваши знания комбинаторов будут очень полезны, если вам нужно что-то стилизовать в документе и вы не можете получить доступ к HTML, возможно, из-за того, что он сгенерирован CMS.

5. Документация по селекторам CSS

• https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors
• https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
• https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors
• https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
• https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors
• https://developer.mozilla.org/en-US/docs/Web/CSS/Next-sibling_combinator
• https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
• https://developer.mozilla.org/en-US/docs/Web/CSS/Column_combinator
• https://developer.mozilla.org/en-US/docs/Web/CSS/Subsequent-sibling_combinator
• https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator
• https://developer.mozilla.org/en-US/docs/Web/CSS/Namespace_separator
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors/Selector_structure
• https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors/Using_the_:target_pseudo-class_in_selectors
• https://developer.mozilla.org/en-US/docs/Learn/Forms/UI_pseudo-classes
• https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
• https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors