Difference between :root and html

The :root selector targets the highest level parent, which would be the <html> tag in an HTML document. The :root has a higher specificity, as it is a pseudo-class instead of a plain element.

CSS-Tricks has a great description on this: :root by Sarah Cope.

In this example, the background of the page would be red, as :root is more specific than html.

:root {background:red;}
html {background:green;}

The :root selector is supported across all major browsers.

Author: Ted

Accessibility is more than making sure images have alternate text. I work with engineers, product managers, and designers to understand how accessibility impacts the users, set realistic deadlines, and create the solutions to provide a delightful experience to all users, regardless of their physical, sensory, or cognitive ability.

Leave a Reply

Your email address will not be published. Required fields are marked *