all vs root vs html vs body selectors
What are they and why are their differences so important?
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,
*{
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,
*{
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.
*{
color: red;
margin 5px;
border: 1px solid black;
}
p{
color: green;
}
<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.
*{
color: red;
margin: 5px;
border: 1px solid black;
}
p{
color: green;
}
.sample-element *{
color: blue;
}
<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.
: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.)
: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,
html {
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 * 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 lemme know in the comment section and do leave your reactions down below.😁
Till next time guys. Byeee!
Connect with Me 🔗
Follow me on Twitter, LinkedIn, and Instagram to stay updated with my latest content. If you like my notes and want to support me, you can buy me a coffee on ByMeACoffee. I love the taste of coffee. 😍 For other ways to support me, visit my Sponsorship Page or Partnership Page.