Комбинаторы CSS
Комбинаторы CSS
Комбинатор — это то, что объясняет взаимосвязь между селекторами.
Селектор 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;
}
Все селекторы комбинаторов CSS
| Selector | Example | Example description |
|---|---|---|
| element element | div p | Selects all <p> elements inside <div> elements |
| element>element | div > p | Selects all <p> elements where the parent is a <div> element |
| element+element | div + p | Selects the first <p> element that are placed immediately after <div> elements |
| element1~element2 | p ~ ul | Selects every <ul> element that are preceded by a <p> element |