: корінь - CSS-хитрощі

Зміст

:rootСелектор дозволяє цільової елемент вищого рівня «батьківського» в DOM або дерево документа. Це визначено в специфікації CSS Selectors Level 3 як "структурний псевдо-клас", тобто воно використовується для стилювання вмісту на основі його взаємозв'язку з батьківським вмістом та вмістом братів і сестер.

У переважній більшості випадків, з якими ви можете зіткнутися, :rootпосилається на елемент веб-сторінки. У документі HTML htmlелемент завжди буде батьком найвищого рівня, тому поведінка користувача :rootпередбачувана. Однак, оскільки CSS - це мова стилів, яка може використовуватися з іншими форматами документів, такими як SVG та XML, :rootпсевдо-клас може посилатися на різні елементи у цих випадках. Незалежно від мови розмітки, :rootу дереві документа завжди буде виділено найвищий елемент документа.

У наведеному нижче прикладі :rootселектор псевдокласу використовується для створення кольору фону за елементом. У цьому випадку такого ж ефекту можна досягти, використовуючи htmlзамість цього селектор елементів у нашому CSS.

Перевірте цю ручку!

Цікаві місця

Хоча і :rootселектор, і htmlселектор орієнтовані на ті самі елементи HTML, може бути корисно знати, що :rootнасправді має вищу специфічність. Селектори псевдокласу (але не псевдоелементи) мають специфіку, рівну специфіці класу, яка вища за селектор базового елемента.