Manuel MatuzovićCSS quiz: The color of the h2 is…
(with native CSS, no preprocessor like Sass).
```
<div>
<h2>A heading</h2>
</div>
```
```
div, #cssisawesome {
h2 {
color: red;
}
}
div h2 {
color: blue;
}
```
red
blue
black (initial)
Poll ended at .
Norm Tovey-Walsh@matuzo I cheated by testing it (in Firefox, anyway), so I won't vote. Then I tried a few experiments. I certainly couldn't explain the behavior if I was asked!
Jan Andrle@ndw @matuzo There is a nice summary https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Nesting_and_specificity
Philipp NP@matuzo Uh! Never thought about specificity and nesting. Initiative answer: Blue. But pretty sure I stepped into a trap.
Eric Eggert@matuzo Okay, I need an explanation for this :-D
Francesco Pongiluppi@matuzo I voted out of intuition but then, reading the related MDN page, I *think* I was wrong. But I had fun *and* I learned something! Win!
Amelia Bellamy-Royds@matuzo I will continue to vote for these all based on what I think it should be, even if I know that it's different.
In this case, I also know why it is (ahem) the way that it is, and I guess I sort of kind of agree but not really. They could have chose then Sass way of expanding the selectors.
Keith J Grant@keithjgrant @matuzo Yes, in Sass, but that's less an issue if you aren't actually expanding, you're just calculating the specificity of the selector matched against a particular element.
Alvaro Montoro@AmeliaBR @keithjgrant @matuzo would it be useful/confusing/utter chaos to have an opposite of :is() that returns the lowest specificity? Not :where that returns 0, but the lowest within the list... Which could still be zero anyway.
Nathan Knowler@alvaromontoro @AmeliaBR @keithjgrant @matuzo I guess we could get some syntax sugar for `:is(<lowest specificity>, :where(<higher specificity>…))`.
This made me think about how `clamp()` is syntax sugar for `max(MIN, min(VAL, MAX))`, but then my mind digressed and I started thinking about a “specificity clamp” which is absurd (e.g. set the lowest and highest specificity — totally impractical).