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;
}
Попробуйте сами »