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;
}
Let's break down the code in the question:
* {
background-color: white;
}
body {
background-color: grey;
}
This is saying:
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 thebody, the page will be grey with or withoutheightbeing 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>ElementFor documents whose root element is an HTML
HTMLelement or an XHTMLhtmlelement: if the computed value ofbackground-imageon the root element isnoneand itsbackground-coloristransparent, user agents must instead propagate the computed values of the background properties from that element's first HTMLBODYor XHTMLbodychild element. The used values of thatBODYelement'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 theBODYelement rather than theHTMLelement.
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? –
Baalbeer 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. –
Carltoncarly *, 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! –
Carltoncarly 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%;
}
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.
* 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
© 2022 - 2024 — McMap. All rights reserved.
*from the equation and just have thebody, the page will be grey with or withoutheightbeing specified. I don't quite understand why that is. – Baalbeer