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

	Комбинатор является то, что объясняет взаимосвязь между селекторов.

Селектор CSS может содержать более одного простого селектора. Между простыми селекторами, мы можем включить комбинатор.

Есть четыре различных комбинаторы в CSS3:

Потомок Selector

Потомок селектор совпадает со всеми элементами, которые являются потомками заданного элемента.

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

div p {
background-color: yellow;
}

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

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

div > p {
background-color: yellow;
}

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

Родственных элементов должны иметь один и тот же родительский элемент, и "смежный" означает "сразу после".

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

div + p {
background-color: yellow;
}

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

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

div ~ p {
background-color: yellow;
}