Просмотров: 1 028

Псевдокласс :root и в чем его отличие от селектора html.

Псевдокласс :root, давайте разберемся где его уместно применять и для чего он нужен.

псевдокласс root

Основная цель его использования, это получить доступ к корневому элементу документа.

А что является корневым элементом для HTML-страницы?

Это элемент <html>. Получается, что с помощью псевдокласса :root мы будем получать доступ к нему.

Вы можете сказать, Дмитрий, а зачем мне вообще использовать псевдокласс :root, когда я могу написать так:

html { background-color: #fcfcfc; }

И успешно получить доступ к элементу <html>?

Но, не стоит забывать, что CSS – это технология, которая используется не только для html-документов, ее также можно применять и к XML-страницам и SVG-файлам, и.т.д.

Используя такую запись:

:root { background-color: #fcfcfc; }

Мы получаем более универсальную форму записи для доступа к корневому элементу страницы. В условиях постоянного развития технологий и появления все новых и новых мобильных устройств – это очень важно.

Вот пример документа, где это можно использовать на практике.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
:root {background-color:#000; }
p {color:#fff;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<p>Пример документа</p>
</body>
</html>

псевдокласс root

Напоследок, хочу сказать, что псевдокласс :root появился совсем недавно и в старых браузерах он работать не будет.