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.
: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;
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.
Would you like to help us improve 30 seconds of code?Take a quick survey
Horizontally and vertically centers a child element within a parent element using flexbox.
Horizontally and vertically centers a child element within a parent element using
Vertically and horizontally centers a child element within its parent element, using