:rootСелектор позволяет целевой элемент высшего уровня «родительского» в DOM или дерево документа. Он определен в спецификации CSS Selectors Level 3 как «структурный псевдокласс», что означает, что он используется для стилизации контента на основе его отношений с родительским и родственным контентом.
В подавляющем большинстве случаев, с которыми вы, вероятно, столкнетесь, :rootотносится к элементу на веб-странице. В документе HTML htmlэлемент всегда будет родительским элементом самого высокого уровня, поэтому его поведение :rootпредсказуемо. Однако, поскольку CSS - это язык стилей, который можно использовать с другими форматами документов, такими как SVG и XML, :rootв этих случаях псевдокласс может ссылаться на разные элементы. Независимо от языка разметки, :rootвсегда будет выбирать самый верхний элемент документа в дереве документа.
В приведенном ниже примере :rootселектор псевдокласса используется для создания цвета фона за элементом. В этом случае того же эффекта можно добиться, используя htmlвместо этого селектор элементов в нашем CSS.
Точки интереса
- Хотя
:rootселектор иhtmlселектор нацелены на одни и те же элементы HTML, может быть полезно знать, что на:rootсамом деле они имеют более высокую специфичность. Селекторы псевдоклассов (но не псевдоэлементы) имеют специфичность, равную специфике класса, который выше, чем селектор базового элемента.
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Ага | Ага | Ага | 9.5+ | IE9 + | Ага | Ага |