all vs root vs html vs body selectors
Posted on: Nov 24, 2021
8 mins read
What are they and why are their differences so important? See the difference between them and hopefully, at the end enlighten you more on how and when to use them.
This note aims to explain the difference between them and hopefully, at the end enlighten you more on how and when to use them.
Prerequisites
I am going to assume that you already have basic knowledge on
- Html elements and
- CSS selectors.
And with that on the confirmation,
Basically, they are CSS selectors. CSS selectors are used to select elements in our html document so we can apply CSS styles to them. Let's dive into the ones mentioned above.
The universal selector
First, let's start with the universal selector *
. As the name implies, it is a universal selector which selects all the elements in your html page, it's as simple as that. Any styling you give to the universal selector gets applied to every element on the page. For example,
css* {border: 1px solid red;}
Here all the elements in your webpage will have a red border. This becomes useful when debugging CSS whereby you want to know the amount of space each element is occupying.
You can also use it to give some CSS reset to your elements. For example,
css* {margin: 0;padding: 0;box-sizing: border-box;}
Here all the elements will have 0 margins and paddings on all sides with their box-sizing set to border-box.
Note that the style given through the use of *
can be overridden by styles given in individual element selectors and should not be used to give permanent styles to elements.
css*{color: red;margin 5px;border: 1px solid black;}p{color: green;}
html<body><div><span>I'm a red span.</span><p>I'm a green paragraph.</p><p>I'm a green paragraph.</p><p>I'm a green paragraph.</p><span>I'm a red span.</span></div></body>
You will see that our p elements would have a color of green instead of red, while other elements in our case the span element would receive the universal color of red.
You can also select all the descendants of a particular element or CSS selector, by placing the *
after the CSS selector.
css* {color: red;margin: 5px;border: 1px solid black;}p {color: green;}.sample-element * {color: blue;}
html<body><div><span>I'm a red span.</span><p>I'm a green paragraph.</p><p>I'm a green paragraph.</p><p>I'm a green paragraph.</p><span>I'm a red span.</span></div><div class="sample-element"><p>I'm a blue paragraph.</p><p>I'm a blue paragraph.</p><span>I'm a blue span.</span></div></body>
The :root selector
:root
on the other hand is a pseudo-class selector. It selects and represents the root element of your document, i.e. the highest-ranking parent element of your document, in our case the html element.
You might think that the html
element selector and :root
selector are the same because they both represent the root parent element but they are not.
Remember I said the :root
selector targets the root element of your document, the keyword being document. This means that your document doesn't necessarily have to be your HTML document, it could also be an XML document, XHTML document or any other document you want to apply CSS style on. And thus the parent element of these files will be the one targeted when you use the :root
selector. That is the html element, xml element and xhtml element respectively.
This also means that when using the :root
selector and html element selector for example to apply a style, the style in the :root
selector will have a higher specificity than the style in the html element selector as seen in the example below.
css:root {background-color: red;}html {background-color: green;}
You will see that the background color is red instead of green.
The :root
selector is also used to declare global variables. Variables in CSS are reusable styles. For example, you have a specific hex code that you want to use as the color for a particular set of elements, instead of memorizing the hex color and entering it one by one on each CSS selector, you can just define it in your :root
and then call it in each CSS selector. Then when you decide you don't like the color again, you can change it in the :root
instead of manually going through all the CSS selectors one by one that you had used it in. This makes it easier to manage repeated styles. (You can read more on variables in my previous note.)
css:root {--primary-color: #ff0000;--secondary-color: #00ff00;}h2 {color: var(--primary-color);}p {color: var(--secondary-color);}
All h2
element and p
element in your page will receive the hex color of #ff0000
and #00ff00
respectively.
The html element selector
Now let's talk about the html
element selector. The html
element selector refers to the root element of an HTML document. It contains two child elements which are the head element and body element.
Some styles declared in the html
element selector will be inherited by all elements in the html file such as color and font styles. While some will not be inherited like the background color.
Here only the html
element will have the background color while the other elements will have a background color of transparent which is the default for all elements. This then gives you the illusion that all the elements have the same background color as the html
element.
It is not recommended to apply styles to the html
element because they will be overridden by the body
element styles and any other element in the document.
The only exception could be if you want to declare the font styles that will be inherited by all its descendant elements, especially the font size. This is because the html
element selector as the root element, has the rem (root em unit) sizing of any element based on whatever font size set for the element (root element).
So for example,
csshtml {font-size: 16px;}.rem-block {font-size: 1.2rem;}
The .rem-block
will have a font size of 19px.
Most of the time if not all the time, the body element would take up all the space in the html document so there would be no point in styling the html element when the body element is eventually going to cover it up in the browser.
The body element selector
The body
element selector on the other hand contains all the elements that we see or view in our web browser.
There isn't much difference between the html
element selector and body
element selector, other than the fact that the body
element selector has higher specificity than the html
element selector. Hence whatever styles you have in the body
element will override any replicate style in the html
element. And also its style can be overridden by the element styles within it.
As I said earlier it is better to give styles to the body
element than the html
element because the body
element covers the entire html
element and it also is the element that actually contains all other elements that we see in our browser. While the html
element just specifies the root element and the type of document.
Let's recap.
The universal selector
- It is a universal selector that selects every element in the html document.
- It can be used to give universal styles to all elements.
- It can also be used to select all descendant elements within a particular element.
- It can be used to create CSS resets.
- It can be overridden by other element styles.
The :root selector
- It is a pseudo-class selector.
- It represents the root parent element of your document.
- It can be either an html, XML, SVG tag, etc depending on what document you are styling with CSS.
- It has a higher specificity than html element selector.
- It is used to declare global variables in CSS.
The html element selector
- It is the root element of an html document.
- It contains 2 child elements being the head and body elements.
- Some styles declared in it are inherited by its descendants and can be overridden by them.
- Only necessary styles should be applied to the html element like the font styles.
The body element selector
- It covers the entire html document viewed in the browser.
- It holds all other elements displayed in the web browser.
- It's better to declare styles in the body than in the html.
Whew, you made it up to the end of this article. Thank You. I do hope you by now understand the difference between the *
selector, the :root
selector, the html
element selector and the body
element selector and how to use them. If you did please share this article, send me a tweet and leave your reactions down below. 😁
Till next time guys. Byeee!
Connect With Me
Follow me on X(Twitter), and LinkedIn to stay updated with my latest content.
If you like my notes and want to support me, you can sponsor me on GitHub Sponsor, or you can buy me a virtual ice cream on ByMeACoffee or Selar. I would really appreciate it. 🙏
For other ways to support me, visit my Sponsorship page or Affiliate Links page.