Menu
Is there any difference between those three CSS rules ?
* {
font-size: 24px
}
:root {
font-size: 24px
}
html {
font-size: 24px
}
683
asked Apr 17 '26 05:04
Yes there is a difference. Below some examples where the result isn't the same
Using *
* {
font-size: 24px
}
p {
font-size:2em;
}<div>
<p>some text <span>here</span></p>
</div>Using html (or :root)
html {
font-size: 24px
}
p {
font-size:2em;
}<div>
<p>some text <span>here</span></p>
</div>Applying font-size to all the elements is different from applying the font-size to the html element and having all the elements inherit the value.
In the first example, span will have a font-size equal to 24px because it was selected by *. In the second example, span will inherit the computed value of p since no selector is targetting it.
between html and :root there is a specificity war where :root will be the winner:
html {
font-size: 999px;
}
:root {
font-size:24px;
}<div>
<p>some text <span>here</span></p>
</div>:root {
font-size:24px;
}
html {
font-size: 999px;
}<div>
<p>some text <span>here</span></p>
</div>All of them will affect your whole HTML. You can even use a forth option, that would be html * { }, that would work on all of your HTML.
Their meaning are:
* means that will select all elements - as per CSS * Selector.: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.You can get more example and information on this post from the Community: How to Apply global font to whole HTML document.
Hope this helps!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With