1

Is there any difference between applying CSS to body tag and universal selector (*). Which scenario will take precedence while applying specificity rules.

user_06
  • 85
  • 2
  • 7
  • `*` is less specific than any tag selector, but it applies to *every* element. `body` just applies to one. Big difference. – Ry- May 16 '18 at 11:05
  • Possible duplicate of [difference between body and \* in css](https://stackoverflow.com/questions/5890342/difference-between-body-and-in-css) – soulshined May 16 '18 at 13:13

5 Answers5

3

Applying styles with the universal selector will apply the code to every element

Applying styles to the body will only affect the body but other elements may inherit those styles

The specificity of the Universal Selector is the lowest you can use. More info on this can be found in the W3C docs

Adam Hughes
  • 2,197
  • 20
  • 31
0

body is for body and (*) is for (*) ? x) If some code ( i hope not) is not in the body, the CSS still apply :)

Ry-
  • 218,210
  • 55
  • 464
  • 476
Paul Tanné
  • 79
  • 10
0

The selector (*) is used for all elements of the page (head, body ...). However, if you apply the body tag, only the body elements have been modified.

Lara
  • 51
  • 1
  • 8
0

Let's take this example:

body{ 
  background-color: red;
}
.random-class{
  background-color: green;
}
.second-random-class{
  font-size: 15px;
}

is not the same as 

* {
  background-color: red
}
.random-class{
  background-color: green;
}
.second-random-class{
  font-size: 15px;
}

since the * selector will apply the background-color to EVERY element.

The *-selector with background-color: red will result in

body{
  background-color: red;
}
.random-class{
  background-color: green;
}
.second-random-class{
  font-size: 15px;
  background-color: red; // <-- received this from *
}

Note that this will NEVER appear like this in the source code (at least if you are not using SCSS or LESS or a similar preprocessor). This is just how the hierachy is defined.

jdickel
  • 1,437
  • 1
  • 11
  • 21
  • 1
    Your final example is slightly askew. CSS property/values apply in order of appearance, one of the reasons it's called `'cascading`. your random class background-color doesn't change to red. For that to happen you would need something like `!important` in your `* { } ` statement – soulshined May 16 '18 at 12:43
  • You're right. I was also wondering... Found a little fail in my testsuite. I'll change it! – jdickel May 16 '18 at 12:47
0

As other's have pointed out * searches for all elements. In short, anytime you specify a specific tag, the tag will naturally target it's own environment. However, another reason is because the html selector is considered the root of any document and the body is a descendant. So * {} !== all elements in html, body {} Therefore, as you inquired, * does not equal <body>. Furthermore, what's even more interesting is that :root and html both target the same thing, except that :root has a higher priority over it's html counterpart.

See HTML spec There are only 2 elements that descend from the HTML root <head> and <body>. See body spec

Here is a short snippet to help visualize:

* {
  background-color: green;
}

body {
  background-color: blue;
}

:root {
  /* i have higher priority over html {} */
  background-color: pink;
}

html {
  background: purple;
}
<p>
  test
</p>
<div>
  test2
</div>
<footer>
  Copyright &copy; 2018
</footer>
soulshined
  • 9,612
  • 5
  • 44
  • 79