Getting to the :root of <html>
Brad Hamilton
Experienced Technology Leader | Passionate about building great people + teams + solutions | Always learning
Have you seen the online discussions and arguments around the purpose and the use of :root and html in CSS selectors??If not, there are many threads on various different sites where people are creating a frenzy around the use of these 2 selectors.?In this mini-article, I'm throwing my hat into the ring as I try to explain the difference and the use of these 2 selectors.
What's a CSS Selector?
A Cascading Style Sheet (CSS) selector is a pattern of coded names and identifiers which tell browsers the elements to apply visual style, behavioral, and inclusion/exclusion values to.??
There are 3 general classes of selector:
- ID selector For an element with a ID attribute
- Class selector For elements with class definitions
- Tag selector For elements of a given tag/type
(Selectors can also include pseudo elements, but I won't get into pseudo elements here.)
Examples:
To select an element with a specific ID #MyElementId
Select all elements with a specific CSS class .border-emphasis
To select all elements with tag of img img
CSS
CSS is a general purpose language and has continued to evolve since it was first created in 1996.?Although most web developers think of CSS as an HTML tool, CSS (and CSS selectors) can also be used with XML documents and documents derived from XML (such as SVG and XHTML).
At first, CSS was a large monolithic specification which few browser creators followed to implement in its entirety.?Therefore, what worked in 1 browser was not guaranteed to work in another browser -- or between different versions of the same browser. Also, since the specification was one large document, authoring the specification and getting consensus and approval was a lengthy process.
CSS 3 was later conceived to be a modular implementation where features were grouped into module specifications and approved by the W3C module-by-module. Once a module was approved, its requirements were considered to be stable.?This allowed browser creators to feel better about implementing the new features.
领英推荐
*Check out this article on The Brief History of CSS (https://www.technologyuk.net/computing/website-development/introduction-to-css/introduction.shtml).
HTML Tag
The HTML tag is the base tag for all HTML documents.?An HTML document starts with <html> and ends with </html> and logically, each document can only have 1 set of html tags -- the open and close pair.?In actuality, you can have more than one set of html tags, but then things get messy with the document and your code.?HTML linters and validators will flag documents with more than one html (and body) tag.
To select the HTML document in CSS, the selector is simply:
html
Example:
To specify all p elements in an HTML document html p
:ROOT Element
:root is a CSS pseudo-class.?A pseudo-class helps to select elements which are (a) relative to other elements (top, above, below), (b) in certain states (visible, focus), (c) they have conditions (first, last, exists).
:root allows the selector to target the top of the document tree, no matter what the "top" may be -- but in most cases, it is the <html> tag.
From the Mozilla documentation:
The :root CSS pseudo-class matches the root element of a tree representing the document. In HTML, :root represents the <html> element and is identical to the selector html, except that its specificity is higher.
*How a browser computes specificity is a different topic and different article.
What to Use?
If you are a web developer and writing CSS to style a page, continue to use the html selector.?The HTML specification will continue to support the HTML tag and the axiom that every document can only have one and only one pair of HTML tags.