CSS Комбинаторы
CSS Комбинаторы
Комбинатор - это то, что объясняет взаимосвязь между селекторами.
CSS селектор может содержать более одного простого селектора. Между простыми селекторами можно включить комбинатор.
В CSS есть четыре разных комбинатора:
- селектор потомков (пробел)
- селектор дочерний (>)
- селектор соседний родственный (+)
- селектор общий родственный (~)
Селектор потомков
Селектор потомков соответствует всем элементам, которые являются потомками указанного элемента.
В следующем примере выбираются все элементы <p> внутри <div> элементов:
Селектор дочерний (>)
Дочерний селектор выбирает все элементы, которые являются потомками указанного элемента.
В следующем примере выбираются все элементы <p>, которые являются дочерними для элемента <div>:
Соседний родственный селектор (+)
Соседний родственный селектор используется для выбора элемента, который находится непосредственно после другого конкретного элемента.
Родственные элементы должны иметь один и тот же родительский элемент, а "смежные" элементы должны "следовать после".
В следующем примере выбирается первый элемент <p>, который размещается сразу после элемента <div>:
Общий родственный селектор (~)
Общий (родственный) одноуровневый селектор выбирает все элементы, которые являются братьями и сестрами указанного элемента.
В следующем примере выбираются все элементы <p>, которые являются родственниками элемента <div>:
Проверьте себя с помощью упражнений!
Все CSS селекторы комбинатора
| Селектор | Пример | Описание |
|---|---|---|
| элемент элемент | div p | Выбирает все элементы <p> внутри элемента <div> |
| элемент>элемент | div > p | Выбирает все элементы <p> у которых родительский элемент <div> |
| элемент+элемент | div + p | Выбирает первый элемент <p>, который размещается сразу после элемента <div> |
| элемент1~элемент2 | p ~ ul | Выбирает каждый элемент <ul>, которому предшествует элемент <p> |
