Темная тема
Комбинированные селекторы
A B
A B - селектор потомков (все B внутри A).
Например. Изменим файл index.html:
html
<body>
<div class="container">
<p>Параграф 1</p>
<div>Блок 1</div>
<p>Параграф 2</p>
</div>
<div>
<p>Параграф 3</p>
<div>Блок 2</div>
<p>Параграф 4</p>
</div>
</body>Изменим файл styles.css:
css
.container p {
color: blue;
}A > B
A > B - селектор дочерних элементов (прямые дочерние B внутри A).
Например. Изменим файл index.html:
html
<body>
<div class="card">
<h3>Заголовок карточки</h3>
<p>Описание карточки</p>
<div>
<p>Футер карточки</p>
</div>
<p>(дата)</p>
</div>
</body>Изменим файл styles.css:
css
.card > p {
color: blue;
font-weight: bold;
}A + B
A + B - селектор соседнего элемента (первый B сразу после A).
Например. Изменим файл index.html:
html
<body>
<h2>Заголовок</h2>
<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p>
</body>Изменим файл styles.css:
css
h2 + p {
color: red;
}A ~ B
A ~ B - селектор общих соседних элементов (все B после A на том же уровне).
Например. Изменим файл index.html:
html
<body>
<h2>Заголовок</h2>
<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p>
<div>
<p>Параграф 4</p>
</div>
</body>Изменим файл styles.css:
css
h2 ~ p {
color: green;
}