:root
Селектор для выбора корневого элемента в HTML и SVG. Часто используют для кастомных свойств.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 9 мая 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Псевдокласс :root нужен для обращения к самому главному родительскому элементу документа. Его также называют корневым элементом. В случае HTML-документа самым главным родителем всей страницы будет тег . Часто :root используется для того, чтобы задавать кастомные свойства.
Пример
Скопировать ссылку «Пример» Скопировано
Укажем в документе нужный нам шрифт и создадим несколько кастомных свойств:
:root font-family: 'Oswald', sans-serif; --button-size: 40px; --main-color: #bada55;>:root font-family: 'Oswald', sans-serif; --button-size: 40px; --main-color: #bada55; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Пишется, как обычный псевдокласс: после двоеточия пишем слово root. Однако в отличие от других псевдоклассов :root полностью самостоятельный, его не используют в связке с другими селекторами.
Как понять
Скопировать ссылку «Как понять» Скопировано
Корневой элемент — это самая главная обёртка в документе, самый первый родитель. В HTML-документах псевдокласс :root будет ссылаться на тег . Поскольку CSS работает ещё и в SVG-, и XML-файлах, для них корневой элемент будет другим. В SVG-документах родителем будет тег , а в XML-документах — тег .
На практике
Скопировать ссылку «На практике» Скопировано
Лена Райан советует
Скопировать ссылку «Лена Райан советует» Скопировано
�� Поскольку :root — это псевдокласс, его специфичность будет выше, чем селекторов по тегу html или svg .
В примере ниже фон документа окрасится в персиковый цвет, а не в томатный.
:root background-color: peachpuff;> html background-color: tomato;>:root background-color: peachpuff; > html background-color: tomato; >
:root¶
Псевдокласс :root определяет корневой элемент документа.
В HTML этот селектор всегда соответствует элементу , но в стилях приоритет :root выше, чем у селектора html .
Синтаксис¶
1 2 3
:root /* . ; */ > Спецификации¶
- Selectors Level 4
- Selectors Level 3
Пример¶
Использование :root полезно для объявления CSS Переменных:
1 2 3 4
:root --main-color: hotpink; --pane-padding: 5px 42px; > CSS псевдокласс :root
Псевдокласс :root выбирает корневой элемент документа.
В HTML корневым элементом всегда является .
Псевдокласс :root работает также в SVG и XML.
Версия
Синтаксис
:root
Пример
html> html> head> style> :root < background-color: #8ebf42; padding: 2em; > body < background-color: #eee; padding: 1.5em; > style> head> body> h2>Пример селектора :root h2> p>Lorem Ipsum - это текст-"рыба", p> body> html>Поддержка браузера
| 4.0+ | 12.0+ | 3.5+ | 3.2+ | 10.0+ |
Как работает псевдокласс :root в CSS
В этом руководстве вы узнаете, что такое псевдокласс :root в CSS и как его можно использовать в проектах.
Псевдокласс :root используется в CSS для выбора родительского элемента самого высокого уровня внутри заданной спецификации. В спецификации HTML :root по сути равен селектору html.
Попробуем продемонстрировать это на примере. В приведенном ниже фрагменте CSS стили :root и html будут делать то же самое:
:root < background-color: gray; >html
Если вы заметили, выше мы говорили, что :root по сути эквивалентен селектору html. Однако фактически, селектор :root имеет больше полномочий, чем html. Это происходит потому, что он считается селектором псевдокласса (как, например, :first-child или :hover).
Следовательно, как селектор псевдокласса он имеет больше полномочий, чем селекторы тегов:
:root < background-color: blue; color: white; >html
Благодаря своей более высокой специфичности селектор :root применяется несмотря на то, что после него идет селектор html.
Псевдокласс :root в разных спецификациях
В спецификации HTML псевдокласс :root нацелен на родительский элемент самого высокого уровня – html.
Поскольку CSS также разработан для SVG и XML, вы можете использовать :root, но он просто будет соответствовать другому элементу.
Например, в SVG родительским элементом самого высокого уровня является тег svg.
:root < fill: gold; >svg
Подобно HTML, теги :root и svg выбирают один и тот же элемент, однако селектор :root будет иметь более высокую специфичность.
Практическое использование :root
Итак, каково практическое использование: root? Как мы уже говорили ранее, это безопасная замена селектора html.
Проще говоря, вы можете делать все то, что обычно делаете с помощью селектора html:
:root
При желании вы можете реорганизовать этот код и применить пользовательские CSS-свойства для создания переменных на глобальном уровне
:root < margin: 0; padding: 0; --primary-color: #0000FF; --body-fonts: "Helvetica", "Arial", sans-serif; --line-height: 1.5; >p
Дополнительным преимуществом :root по сравнению с html является возможность стилизовать графику SVG.
:root < margin: 0; padding: 0; --primary-color: #0000FF; --body-fonts: "Helvetica", "Arial", sans-serif; --line-height: 1.5; >svg < font-family: var(--body-fonts); >svg circle
Если вы хотите узнать о псевдоклассе :root больше, обратитесь к Mozilla Developer Network.