🎨 HTML / CSS
Intermediate
What is the :root pseudo-class in CSS and what is it used for?
Answer
The :root pseudo-class matches the root element of the document, which in HTML is the <html> element. It has higher specificity than the html element selector. Its primary use is declaring CSS custom properties (variables) that are globally accessible throughout the stylesheet: :root { --primary: #3490dc; --radius: 8px; }. Variables declared on :root are available to every element. It is also a convenient place for global resets and font size definitions. Many design systems and component libraries declare all their design tokens on :root, enabling easy theming by overriding these variables.
Previous
What are CSS Logical Properties?
Next
What are CSS container queries and how do they differ from media queries?
More HTML / CSS Questions
View all →- Intermediate How does the CSS cascade work?
- Intermediate What is BEM (Block Element Modifier) methodology in CSS?
- Intermediate What are CSS custom properties (CSS variables)?
- Intermediate What is the difference between em, rem, px, vh, and vw units in CSS?
- Intermediate How does Flexbox differ from CSS Grid? When would you use each?