30-seconds-of-code/blog_posts/css-root-vs-html.md

title, shortTitle, type, tags, expertise, author, cover, excerpt, firstSeen

title	shortTitle	type	tags	expertise	author	cover	excerpt	firstSeen
What's the difference between :root and html in CSS?	:root vs html	story	css,layout,selector	beginner	chalarangelo	blog_images/tree-roots.jpg	The CSS selectors used to target the root element of an HTML share some similarities, but they also have some differences.	2022-05-22T05:00:00-04:00

CSS has two ways to target the root element of an HTML document - the :root pseudo-class and the html selector. While these are very similar to each other, they have a couple of differences you should know.

Selector specificity

The :root selector has a higher specificity than the html selector. This is because :root is a pseudo-class selector, while html is a type selector.

:root {
  background-color: red;
}

html {
  background-color: blue;
}

/* The HTML document's root element will have a red background-color.  */

Targeting the root element

CSS can be used to style other types of documents, apart from HTML. This is where the :root element comes in to play, allowing you to style the root element of a document. This can be especially important when styling SVG documents, where the html selector will not work.