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