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

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

От автора: селектор псевдо-класса CSS :root используется для выбора родителя самого высокого уровня данной спецификации. В спецификации HTML, :root по сути, эквивалентен селектору html.

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Подобно HTML, :root и svg выбирают один и тот же элемент, однако селектор :root будет иметь более высокую специфичность.

Практическое использование

Для чего практически применяется :root? Как мы уже было сказано, это безопасная замена для селектора html. Это означает, что вы можете делать все, что обычно делаете с селектором html:

Если хотите, вы можете изменить этот код, чтобы использовать Пользовательские свойства CSS для создания переменных на глобальном уровне!

Дополнительным преимуществом использования :root вместо html заключается в том, что вы можете стилизовать SVG-графику!

Подробную документацию по селектору псевдо-класса :root можно найти на Mozilla Developer Network.

Автор: William Le

Источник: https://alligator.io

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: