6

Is there any difference between those three CSS rules ?

* {
  font-size: 24px
}
:root {
  font-size: 24px
}
html {
  font-size: 24px
}
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Coding Cable
  • 73
  • 2
  • 7

3 Answers3

18

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
3

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:

  • The * means that will select all elements - as per CSS * Selector.
  • 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.

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!

0

If we have something like this, with all of *, :root and html together as below

*{
  background: green;
}
:root{
backgroud:yellow
}
html{
background:black
}
h1{
background:blue
}
<h1>This is a heading<span>Cow</span></h1>

The specificity is as below :root(yellow) >html(black)>*(green)

tennis
  • 31
  • 8
Ankita Sinha
  • 91
  • 3
  • 12