Селекторы отношений

В CSS есть несколько селекторов отношений между элементами. Вот основные:

📌 1. > — прямой потомок

div > p {
  color: red;
}

— выбирает только прямых детей тега div, то есть p, который находится непосредственно внутри div.

📌 2. Пробел — любой потомок (вложенность)

div p {
  color: blue;
}

— выбирает всех потомков p, вложенных в div, неважно на какой глубине.

📌 3. + — соседний (следующий) элемент

h2 + p {
  color: green;
}

— выбирает p, который сразу следует за h2 (на том же уровне вложенности).

📌 4. ~ — все последующие сиблинги

h2 ~ p {
  color: purple;
}

— выбирает все p, находящиеся на том же уровне, которые идут после h2, но не обязательно сразу.

Сводка