skip to main content

.first-class .second-class

css

Кратко 🔗

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

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

🤖 Такие вложенные селекторы используются, если нужно задать разные стили для класса на всей странице и классу внутри определённого блока.

Пример 🔗

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

HTML

<div class="wrapper">
<!-- Абзац текста на странице -->
<p class="text">Если вам скажут...</p>

<div class="news-card">
<h2 class="news-card__title">Все новости должны быть такими</h2>
<!-- Абзац текста внутри новостной карточки -->
<p class="text news-card__text">
У пингвинов, живущих в Московском зоопарке...
</p>
</div>
</div>

CSS

body {
background-color: #000000;
}

/* Стили текста для всей страницы */
.text {
color: #ffffff; /* Белый цвет */
line-height: 1.5;
}

/* Стили для текста, вложенного в блок .news-card */
.news-card .text {
color: #000000; /* Черный цвет */
}

Как это понять 🔗

Часто пробел не имеет особого значения. Но не в CSS. При написании стилей пробел между селекторами по классу является указателем взаимоотношений между элементами.

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

Подробнее можно прочитать в статье Специфичность в CSS

Как пишется 🔗

Всё просто! Берём один селектор по классу. Берём второй селектор по классу. Соединяем их при помощи пробела. Profit! 😉

Подсказки 🔗

💡 Кроме пробела есть разные операторы для соединения двух селекторов: +, ~, >. Но чаще всего ты будешь пользоваться именно пробелом.

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

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

В работе 🔗

Алёна,

🛠 Можно перечислять сколько угодно классов, спускаясь ниже и ниже по дереву вложенности элементов, но селекторы с более чем двумя составляющими сложно читать. И если нужен более сложный селектор, то это повод пересмотреть HTML-разметку и проверить её целесообразность.

Автор: Алёна,