Используются для того чтобы выбрать элементы в зависимости от того как они связаны с другими элементами на веб-странице.
Комбинатор
выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).
css
div p {
color:red;
}
html
<div>
<p>Текст 1 [color red]</p>
<p>Текст 2 [color red]</p>
</div>
<p>Текст 3-1</p>
<p>Текст 3-2</p>
<div>
<section>
<p>Текст 4 [color red]</p>
<div>Содержимое контейнера</div>
</section>
<p>текст 5 [color red]</p>
</div>
Комбинатор >
выбирает элементы, которые являются дочерними непосредственно по отношению к указанному элементу.
css
div > p {
color: red
}
html
<div>
<p>Текст 1 [color red]</p>
<p>Текст 2 [color red]</p>
</div>
<p>Текст 3-1</p>
<p>Текст 3-2</p>
<div>
<section>
<p>Текст 4</p>
<div>Содержимое контейнера</div>
</section>
<p>текст 5 [color red]</p>
</div>
Комбинатор +
выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.
css
div + p {
color: red
}
html
<div>
<p>Текст 1</p>
<p>Текст 2</p>
</div>
<p>Текст 3-1 [color red]</p>
<p>Текст 3-2</p>
<div>
<section>
<p>Текст 4</p>
<div>Содержимое контейнера</div>
</section>
<p>текст 5</p>
</div>
Комбинатор ~
выбирает элементы, которые находятся после указанного элемента, если у них общий родитель.
css
div ~ p {
color: red
}
html
<div>
<p>Текст 1</p>
<p>Текст 2</p>
</div>
<p>Текст 3-1 [color red]</p>
<p>Текст 3-2 [color red]</p>
<div>
<section>
<p>Текст 4</p>
<div>Содержимое контейнера</div>
</section>
<p>текст 5</p>
</div>