-
Got this question in a DM, and wanted to answer in public in case it helps anyone else. * {color: blue} section {color: green} A nested h1 will be blue… body {color: blue} section {color: green} Same h1 is now green… Why?Permalink On twitter.com
♻️ 53 Retweets ❤️ 195 Favorites Mood +2 🙂
-
The quick answer is: * selects every element on the page, so the h1 is styled directly, rather than inheriting a style. The longer answer:Permalink On twitter.com
-
This is a great example of Cascade vs Inheritance. – The Cascade goes first: setting explicit values on elements. – Inheritance comes after, and fills in the gaps where no explicit value has been set.Permalink On twitter.com
-
The * selector targets every element on the page, including our nested h1. That acts exactly like: h1 { color: blue; } The only difference is in selector specificity, which would be used to resolve conflicts if there were any. No conflict, so the h1 is explicitly blue.Permalink On twitter.com
-
In the other case, *neither* selector targets an h1, & the cascade resolves to… no explicit color. So inheritance steps in. H1 takes the color of its parent. If that's empty, keep going till you one. Whichever "ancestor" you get to first (section or body) will set the color.Permalink On twitter.com
-
By default inheritance only applies to some styles: usually the text-related stuff, & not the box/layout stuff. Try inheriting borders or margins everywhere & see why. We can turn it on: h1 {margin: inherit} or off: h1 {color: initial} Any explicit value will preempt it.On twitter.com