CSS Комбинаторы
CSS Комбинатор
Комбинатор - это то, что объясняет взаимосвязь между селекторами.
Селектор CSS может содержать более одного селектора. Между селекторами, можно включить комбинатор.
Есть четыре различных комбинатора в CSS3:
- селектор потомок
(пробел)
- селектор дочерний
(>)
- селектор смежных компонентов
(+)
- общий селектор родственных элементов
(~)
Селектор потомок
Селектор потомок сопоставляется всем элементам, которые являются потомками указанного элемента.
Следующий пример выбирает все элементы <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;
}
Попробуйте сами »