:rootСелектор дозволяє цільової елемент вищого рівня «батьківського» в DOM або дерево документа. Це визначено в специфікації CSS Selectors Level 3 як "структурний псевдо-клас", тобто воно використовується для стилювання вмісту на основі його взаємозв'язку з батьківським вмістом та вмістом братів і сестер.
У переважній більшості випадків, з якими ви можете зіткнутися, :rootпосилається на елемент веб-сторінки. У документі HTML htmlелемент завжди буде батьком найвищого рівня, тому поведінка користувача :rootпередбачувана. Однак, оскільки CSS - це мова стилів, яка може використовуватися з іншими форматами документів, такими як SVG та XML, :rootпсевдо-клас може посилатися на різні елементи у цих випадках. Незалежно від мови розмітки, :rootу дереві документа завжди буде виділено найвищий елемент документа.
У наведеному нижче прикладі :rootселектор псевдокласу використовується для створення кольору фону за елементом. У цьому випадку такого ж ефекту можна досягти, використовуючи htmlзамість цього селектор елементів у нашому CSS.
Цікаві місця
- Хоча і
:rootселектор, іhtmlселектор орієнтовані на ті самі елементи HTML, може бути корисно знати, що:rootнасправді має вищу специфічність. Селектори псевдокласу (але не псевдоелементи) мають специфіку, рівну специфіці класу, яка вища за селектор базового елемента.
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| так | так | так | 9,5+ | IE9 + | так | так |