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

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

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

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

Группировка

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

Пример без группировки

h2 {
  font-size: 16px;
}
p {
  font-size: 16px;
}
.text {
  font-size: 16px;
}

Пример с группировкой

h2, p, .text {
  font-size: 16px;
}

Объединение

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

Правило записи: .class1.class2

Пример:

.class1.class2 {
  color: tomato;
}

<div class="class1 class2">Этот DIV будет содержать текст помидорного цвета</div>
<div class="class1">Данный DIV будет иметь цвет по умолчанию</div>

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

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

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

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

Правило записи: element1  element2

Пример:

.parent p {
  color: blue;
}

Здесь будут выбраны все p элементы, которые являются потомками элемента с классом "parent", независимо от того, насколько глубоко они вложены.

<div class="parent">
  <p>Этот параграф будет выбран с помощью селектора потомка.</p>
  <span>Span не будет выбран.</span>
  <div>
    <p>Этот параграф будет выбран с помощью селектора потомка.</p>
  </div>
</div>

Селектор дочерних элементов

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

Правило записи: element1 > element2

Пример:

.parent > p {
  color: red;
}

В этом случае будут выбраны только p элементы, которые являются непосредственными детьми элемента с классом "parent".

<div class="parent">
  <p>Этот параграф будет выбран с помощью дочернего селектора.</p>
  <span>Span не будет выбран.</span>
  <div>
    <p>Данный параграф является потомком, но не будет выбран.</p>
  </div>
</div>

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

(соседние)

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

Правило записи: element1 + element2

Пример:

h1 + p {
  color: red;
}

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

<h1>Абзац красного цвета</p>
<p>Абзац красного цвета</p>
<p>Абзац цвета по умолчанию</p>

Родственные селекторы

(сиблинговые, сестринские)

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

Правило записи: element1 ~ element2

Пример:

h2 ~ p {
  font-size: 24px;
}

Cтиль применится тегам p, следующим после тега h2 и стоящим до закрывающего тега родителя div.

<div class="parent1">
  <h1>Стиль по умолчанию</h2>
  <p>Стиль по умолчанию</p>
  <h2>Стиль по умолчанию</h2>
  <p>Стиль применится</p>
  <p>Стиль применится</p>
  <h3>Стиль по умолчанию</h3>
  <p>Стиль применится</p>
</div>

<div class="parent2">
  <p>Стиль по умолчанию</p>
</div>

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

Методология BEM

Методология была разработана Яндексом для быстрого создания сайтов и их легкой поддержки при расширении в дальнейшем. Сейчас такие крупные российские и зарубежные компании, как Google, Epam, Яндекс, Альфа-Банк, BuzzFeeed, используют BEM на своих проектах.

BEM (БЭМ: Блок, Элемент, Модификатор) — это методология именования классов в СSS, создающая компонентный подход в работе над проектом, где интерфейс делится на переиспользуемые блоки.

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