CSS :root — кореневий елемент і місце для змінних
CSS-селектор :root обирає кореневий елемент документа. В HTML це <html>, і саме тут заведено оголошувати CSS-змінні.
Загальний опис
автор: NagarD
Синтаксис
:root {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 9.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 37 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Червоне тло задано не body, а кореневому елементу документа. :root — це той самий html, але з вищою специфічністю; саме тут заведено оголошувати css-змінні.
HTML
<p>Тло всієї сторінки — від правила на :root.</p>CSS
:root {
background: #ff0000;
}Змінні оголошено в :root — їх видно всьому документу; секція перевизначає ті самі імена й міняє вигляд усього всередині.
HTML
<div class="card">Звичайна картка</div>
<section class="dark">
<div class="card">Та сама картка в темній секції</div>
</section>CSS
:root {
--bg: #eff6ff;
--fg: #1e3a8a;
--gap: 1rem;
}
.card {
font: 16px system-ui, sans-serif;
margin-bottom: var(--gap);
padding: var(--gap);
border-radius: 8px;
background: var(--bg);
color: var(--fg);
}
/* ті самі імена, інші значення — усе всередині підхоплює */
.dark {
--bg: #1e293b;
--fg: #e2e8f0;
padding: var(--gap);
border-radius: 8px;
background: #0f172a;
}Коментарі
Коментарів ще немає — будьте першим!