CSS Комбинаторные селекторы

Комбинаторы CSS

	Комбинаторы описывают связь между двумя селекторами.

Комбинаторы CSS включают различные способы объединения простых селекторов.

В CSS3 существует четыре способа комбинирования:

• Селектор потомков (пробел) разделённые)
• Дочерний селектор (знак больше)>разделённые знаком)
• Селектор смежных элементов (знак плюс)+разделённые)
• Селектор родственных элементов (тильда)～разделённые)

Селектор потомков

Селектор потомков используется для выбора элементов-потомков некоторого элемента.

Следующий пример выбирает все элементы <p> внутри элементов <div>:

Селектор дочерних элементов

По сравнению с селектором потомков, дочерний селектор (дочерние селекторы) может выбирать только элементы, которые являются прямыми/дочерними элементами первого уровня некоторого элемента.

Следующий пример выбирает все прямые дочерние элементы <p> элемента <div>:

Селектор соседнего элемента

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

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

Следующий пример выбирает первый элемент <p> после всех элементов <div>:

Селектор последующих соседних элементов

Селектор последующих соседних элементов выбирает все соседние элементы, которые следуют за указанным элементом.

Следующий пример выбирает все смежные соседние элементы <p> после всех элементов <div>: