Root css что это
Перейти к содержимому

Root css что это

  • автор:

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

Селектор для выбора корневого элемента в 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

CSS псевдокласс :root находит корневой элемент дерева документа. Применимо к HTML, :root находит элемент и идентичен селектору по тегу html , но его специфичность выше.

Пример

Использование :root полезно для объявления CSS Переменных:

:root  --main-color: hotpink; --pane-padding: 5px 42px; > 

Спецификации

Specification
Selectors Level 4
# root-pseudo

Поддержка браузерами

BCD tables only load in the browser

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Как использовать селектор псевдо-класса CSS :root

В сниппете CSS ниже стили :root и html будут делать то же самое:

background-color : gray ;
background-color : gray ;

Если вы заметили, я сказал, что :root по сути эквивалентно селектору html. На самом деле, селектор :root имеет больше полномочий, чем html. Это потому, что он на самом деле считается селектором псевдо-класса (как, например, :first-child или :hover).

Как селектор псевдо-класса, он обладает большей специфичностью, чем селекторы тегов:

background-color : blue ;
color : white ;
background-color : red ;
color : white ;

Несмотря на то, что селектор html следует за ним, :root все равно является приоритетным, благодаря более высокой специфичности!

Пересечение спецификаций

В спецификации HTML псевдо-класс :root указывает на родителя самого высокого уровня: html. Поскольку CSS также разработан для SVG и XML, вы можете использовать :root для них, и он будет просто соответствовать другому элементу. Например, в SVG родительским элементом высшего уровня является тег svg.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *