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> |
