Другие CSS селекторы

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

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

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

h1 {
  font-weight: bold;
}

h2 {
  font-weight: bold;
}

h3 {
  font-weight: bold;
}
css

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

h1,
h2,
h3 {
  font-weight: bold;
}
css

Селекторы потомков

Иногда возникает ситуация, когда на странице есть несколько одинаковых элементов, но стилизовать нужно только те из них, которые находятся внутри определённого блока. Представьте, что на странице есть несколько текстовых абзацев (<p>):

• часть из них находится внутри статьи
• часть — в подвале страницы
• часть — в боковой колонке

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

родитель потомок {
  свойства;
}
css

Это правило означает: «Выбрать все элементы потомок, которые находятся внутри элемента родитель на любом уровне вложенности».

Давайте рассмотрим пример:

<article class="post">
  <p>Абзац внутри статьи</p>
  <p>Ещё один абзац</p>
</article>

<p>Абзац вне статьи</p>
html

Чтобы применить какой-либо стиль к абацам внутри <article> можно использовать селектор потомка:

.post p {
  color: blue;
}
css

Или такой вариант, в котром в качестве родительского использован селектор тега вместо класса:

article p {
  color: red;
}
css

Селекторы потомков полезны, когда:

• нужно стилизовать элементы только в определённом контексте;
• элементы не имеют собственного класса;
• стили зависят от расположения элемента в структуре страницы;
• требуется избежать лишних классов в HTML;

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

Объединение классов

В CSS можно выбирать элементы, которые одновременно имеют несколько классов. Такой селектор называется селектором объединения классов:

.class1.class2 {
  свойства;
}
css

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

Рассмотрим пример:

<div class="card featured">Карточка</div>
<div class="card">Обычная карточка</div>
<div class="featured">Блок не связанный с карточками</div>
html

На странице присутствуют элементы с разными наборами классов:

• первый элемент имеет два класса: card и featured;
• второй элемент имеет только класс card;
• третий элемент имеет только класс featured; Теперь опишем стили:

.card {
  border: 1px solid #ccc;
  padding: 16px;
}

.featured {
  background-color: lightyellow;
}

.card.featured {
  border-color: orange;
}
css

Карточка, которая имеет оба класса .card и .featured получит оранжевую рамку.

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

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

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

[href] {
  color: red;
}
css

Такой селектор выберет все элементы страницы у которых есть атрибут href, т.е. ссылки.

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

[href="https://advanced-frontend.ru/"] {
  color: red;
}
css

Здесь мы выбираем только ссылки в которых значение href равно определенному URL.

Другие селекторы

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

Непосредственно вложенные элементы - селектор >

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

.parent > p {
  color: red;
}
css

В примере ниже выберется параграф, который является прямым потомком, а параграф, который дополнительно вложен в <div> выбран не будет:

<div class="parent">
  <p>Будет выбран</p>
  <div>
    <p>Не будет выбран</p>
  </div>
</div>
html

Непосредственно вложенные селекторы на doka.guide

'Смежный' или по-другому 'соседний' селектор - +

Селектор последующих элементов - ~

Селектор ~ выбирает все элементы-соседи, которые идут после указанного элемента.:

h2 ~ p {
  color: gray;
}
css

В отличие от +, выбираются все подходящие элементы, а не только первый:

<h2>Заголовок</h2>
<p>Первый абзац</p>
<p>Второй абзац</p>
html

Селектор последующих элементов на doka.guide