Why CSS Descendant Combinator doesn’t overrides styles of Class Selector
I’ve used example in the spec Calculating a selector’s specificity to determine selectors weight. Both selectors have specificity: 11 points. 11 = 10 (class name) + 1 (element name)
According to specification w3c cascading rules the 2nd selector should override the 1st one because it appears later in the file. Therefore, my question is why the paragraph is still red?
Therefore, my question is why the paragraph is still red?
Your HTML is invalid. You can’t nest
p elements. See the relevant spec for a list of elements that the
p element can contain.
Since it’s invalid, this is how the element(s) are being rendered:
The paragraph is still red because the selector
p .c11 will select an element with a class of
c11 that is a descendant of a
p element. The space in the selector
p .c11 is a descendant combinator. Since you can’t nest
p elements, the selector
p .c11 isn’t selecting anything.