3

When viewing the code below in my browser the background is white. The universal selector * has the lowest specificity, and the body selector comes after the universal selector. Shouldn't it be grey?

* {
    background-color: white;
}

body {
    background-color: grey;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
jakewies
  • 342
  • 6
  • 18
  • 1
    It will be https://jsfiddle.net/13gjwLox/1/ you just need to set height – Nenad Vracar Jan 09 '16 at 20:04
  • 1
    Interesting. But if we eliminate the `*` from the equation and just have the `body`, the page will be grey with or without `height` being specified. I don't quite understand why that is. – jakewies Jan 09 '16 at 20:07
  • 1
    I think when you don't set the height then html inherit the background color of body - https://jsfiddle.net/gbzmauLa/ as you can see in that fiddle html override the body background color – Anonymous Jan 09 '16 at 20:10
  • 1
    Yea that is interesting and this is what i find out "In the absence of a background on the html element, the body background will cover the page. If there is a background on the html element, the body background behaves just like any other element." And here is proof https://jsfiddle.net/13gjwLox/3/ – Nenad Vracar Jan 09 '16 at 20:14

4 Answers4

6

Let's break down the code in the question:

* {
    background-color: white;
}

body {
    background-color: grey;
}

This is saying:

  1. Select every element and make its background color white.
  2. Select the body element and make its background color grey.

Well, if the universal selector says select all elements, this would include the root element (html).

So the code computes to:

html {
    background-color: white;
}

body {
    background-color: grey;
}

The root element paints the canvas white, and the body element has no height, so the canvas remains white.

Add some content to your page or specify a height for body and you'll see gray.

Observation made in the comments:

Interesting. But if we eliminate the * from the equation and just have the body, the page will be grey with or without height being specified. I don't quite understand why that is.

So if we eliminate the universal selector, what happens to the background-color of the root element?

It resets to its initial value: transparent (see: 3.2. the background-color property)

And when the background-color of the html element is transparent, the browser uses the background-color of the body element to paint the canvas.

3.11.2. The Canvas Background and the HTML <body> Element

For documents whose root element is an HTML HTML element or an XHTML html element: if the computed value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the computed values of the background properties from that element's first HTML BODY or XHTML body child element. The used values of that BODY element's background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background for the BODY element rather than the HTML element.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 1
    See also [What's the difference in applying CSS to html, body, and *?](http://stackoverflow.com/questions/7187569/whats-the-difference-in-applying-css-to-html-body-and) – BoltClock Jan 10 '16 at 04:37
  • Thank you I sort of worked this all out yesterday but excellent explanation! So basically what was happening was I specified a `background-color` of white for ALL elements on the page, and specified a `background-color` of grey for the `body` element, but since the `body` element had only a `div` inside of it (which inherits a `background-color` of white from the `*`), i was seeing only white. once i removed the `div` and added some random text and/or increased the `height` of the `body` i finally saw some grey. is my thinking correct? – jakewies Jan 10 '16 at 21:15
  • Hi Jake, here's a quick run-down: You specified a `background-color` of white for ALL elements on the page, and specified a `background-color` of grey for the `body` element. *But since the `body` element has no height (presumably it has no content), there is no grey background to see.* Therefore, the white background, used by all other elements including `html` (which comes before `body` in the code), is visible across the entire page. – Michael Benjamin Jan 11 '16 at 01:24
  • Once you remove the `*`, the `html` element has a `background-color` of `transparent` by default, but since you specified that `body` has `background-color: grey` then, according to the rules of CSS, the `html` element must take the `body` color, and the page goes full grey. Hopefully that clarifies it a bit more. All the details are actually in my answer. Just go through it again. If you have any more questions post them below. Cheers! – Michael Benjamin Apr 16 '16 at 14:42
1

Your body element is probably empty (or contains only other elements, but not direct text).

Add some text to the body. You’ll see that its background will be grey.

Your * {background-color: white;} gives the html element and any other element (except body) a white background. So if your body contains only a div element, this div will have a white background, and you won’t see the grey body background because the div fills it out completely. If you give the body some padding, you’ll see the background color.

    * {
        background-color: white;
    }

    body {
        background-color: grey;
        padding:1%;
    }
unor
  • 92,415
  • 26
  • 211
  • 360
0

I think the body's background does change, but due to the children inside the body being affected by the * selector, you can't actually see it. The * also selects the children of the body, and sets the background of those elements, covering the body's background up.

* { background-color: white }
body { background-color: grey }
<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>

Same snippet with the <p> positioned relatively to reveal the body's background-color:

* { background-color: white }
body { background-color: grey }
p {
  position: relative;
  top: 50px;
}
<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>

Additionally, if your body is empty, t won't have a height, thus making it essentially invisible.

SeinopSys
  • 8,787
  • 10
  • 62
  • 110
0

* selects all the elements and this code 

* {
    background-color: white;
}

changes every element's background color to white. Then you override the body background color to grey because the element selector 'body' is more specific then *

body {
    background-color: grey;
}

you don't see it because you don't have any content in the body. Here you can see the css selectors and how to Calculating a selector's specificity

Kos
  • 567
  • 4
  • 15