Комбинаторы CSS
Комбинаторы выражают отношение между двумя или более селекторами.
Один CSS-селектор может состоять из нескольких селекторов, а комбинатор между ними делает выбор более конкретным.
В CSS их четыре: комбинатор потомков (пробел), дочерний комбинатор (>), комбинатор следующего соседа (+) и комбинатор последующих соседей (~).
Комбинатор потомков (пробел)
Дети, внуки и всё, что вложено глубже, считаются потомками, и этот комбинатор выбирает их всех внутри указанного элемента.
Пример
Выбирается каждый <p> внутри <div>.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Descendant Combinator</title>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Descendant Combinator</h2>
<p>This paragraph is not inside a div.</p>
<div>
<p>Paragraph 1 inside the div.</p>
<p>Paragraph 2 inside the div.</p>
<section>
<p>Paragraph inside a section, inside the div (still a descendant).</p>
</section>
</div>
<p>This paragraph is not inside a div.</p>
</body>
</html>
Дочерний комбинатор (>)
Дочерний комбинатор выбирает только прямых потомков указанного элемента.
Пример
Здесь <p> выбирается, только если он является прямым потомком <div>.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Child Combinator</title>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Child Combinator</h2>
<p>This paragraph is not inside a div.</p>
<div>
<p>Paragraph 1 in the div (direct child).</p>
<p>Paragraph 2 in the div (direct child).</p>
<section>
<p>Paragraph inside a section (not a direct child of div).</p>
</section>
</div>
<p>This paragraph is not inside a div.</p>
</body>
</html>
Комбинатор следующего соседа (+)
Два элемента являются соседями, когда у них общий родитель. Комбинатор следующего соседа выбирает один элемент, расположенный сразу после указанного элемента.
Пример
Выбирается только первый <p>, идущий сразу после <div>.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Next Sibling Combinator</title>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Next Sibling Combinator (+)</h2>
<p>This paragraph is before the div.</p>
<div>
<p>Paragraph inside the div.</p>
</div>
<p>This paragraph is immediately after the div (selected).</p>
<p>This paragraph is also after the div but not immediately (not selected).</p>
</body>
</html>
Комбинатор последующих соседей (~)
Если предыдущий комбинатор останавливается на одном элементе, то комбинатор последующих соседей выбирает всех следующих соседей указанного элемента.
Пример
Выбирается каждый <p>, который идёт после <div> и является его соседом.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subsequent-sibling Combinator</title>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Subsequent-sibling Combinator (~)</h2>
<p>Paragraph 1 (before the div, not selected).</p>
<div>
<p>Paragraph inside the div.</p>
</div>
<p>Paragraph 2 (sibling after the div, selected).</p>
<p>Paragraph 3 (sibling after the div, selected).</p>
</body>
</html>