CSS приклад: Псевдокласс :root

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
 9.0+1.0+9.5+1.0+1.0+1.0+1.0+

Псевдоклас :root

ЗастосовуєтьсяДо всіх елементів
Посилання на специфікаціюhttp://www.w3.org/TR/css3-selectors/#root-pseudo

Версії CSS

CSS 1CSS 2CSS 2.1CSS 3

Опис

Псевдоклас :root визначає кореневий елемент документа. У HTML цей селектор завжди відповідає елементу <html>.

Синтаксис

:root { ... }

Значення

Немає.

Псевдокласи

Часті запитання

  • Q: Як використовувати псевдоклас :root в CSS?

    A: Кореневий псевдоклас :root використовується для встановлення стилів для кореневого елемента документа, зазвичай <html>. Наприклад, :root { font-size: 16px; } встановить базовий розмір шрифту для всього документа.

  • Q: Де можна використовувати псевдоклас :root в CSS?

    A: Псевдоклас :root можна використовувати у будь-якому місці CSS-коду, де потрібно встановити глобальні стилі для всього документа.

  • Q: Чи можна використовувати :root для встановлення змінних CSS?

    A: Так, псевдоклас :root часто використовується для визначення глобальних CSS-змінних. Наприклад, :root { --primary-color: blue; } визначить змінну --primary-color, яку можна використовувати в усьому документі.

  • Q: Як використовувати значення, встановлене через :root, в інших частинах CSS-коду?

    A: Для використання значень, встановлених через :root, слід використовувати функцію var(). Наприклад, color: var(--primary-color); встановить колір тексту на основі значення змінної --primary-color.

  • Q: Чи можна вкладати псевдоклас :root у селектори?

    A: Ні, псевдоклас :root не можна вкладати у селектори. Він використовується самостійно для визначення глобальних стилів.