Псевдоклас :root відповідає кореневому елементу <html>. Таким чином, селектори :root і html застосовують стиль до одного і того ж елементу < html>.
Проте, між :root і html є невелика відмінність — у :root пріоритет вищий, ніж у селектора html. Якщо задати однакові стильові правила для цих селекторів, стиль :root перевизначить стиль html. У прикладі 1 показана така ситуація.
Приклад 1. Перевизначення стилю
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:root</title> <style> :root { background-color: #00a651; /* Зелений колір тла */
color: #fff; /* Колір тексту */
}
html { background-color: #f190ac; /* Рожевий колір фону */
}
</style>
</head>
<body> <p>Текст</p>
</body>
</html>У цьому прикладі використовуються два селектори з однією властивістю background-color, але з різними значеннями. Оскільки пріоритет :root вищий, ніж у html, для веб-сторінки буде заданий зелений колір фону.
Псевдоклас :root також застосовується для визначення змінних, які можна вставляти замість конкретних значень стильових властивостей. Імена змінних починаються з двох дефісів, а значення змінної вказується після двокрапки. В цілому, ініціалізація змінних відбувається подібно до стильової властивості.
:root {--primary-color: #007bff; }Надалі, для виклику значення змінної використовується ключове слово var, після якого в круглих дужках пишеться ім'я змінної.
a { color: var(--primary-color); }Це правило відповідає наступному запису, тому що замість var(--primary-color) підставляється значення змінної --primary-color.
a { color: #007bff; }Змінні зручно використовувати для великих сайтів з безліччю стильових правил, оскільки вони дозволяють задати типові значення в одному місці і легко при необхідності їх поміняти. Включати змінні у свій стиль не обов'язково, додавайте їх за бажання, виходячи з власних уподобань. стильових властивостей. У прикладі 2 показано застосування змінних для зміни виду кнопки.
Приклад 2. Змінні в CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:root</title> <style> :root {--primary-color: #00a651;--button-color: #fffac0;--primary-padding: .5rem 1rem; }
button { background-color: var(--primary-color); color: var(--button-color); padding: var(--primary-padding); border: none; }
</style>
</head>
<body> <button>Текст</button>
</body>
</html>У даному прикладі для :root ми визначаємо кілька змінних, а потім вставляємо їх як значення.
Браузер Internet Explorer не підтримує змінні і в ньому приклад 2 працювати не буде. Див. також