CODEWITHSUNDEEP
csscss-selectorscss-specificity
ieXcept
ieXcept

Reputation: 1127

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?

p.c11 {             
  color: darkred;
}

p .c11 {              
  color: magenta;
}  
<p>
    <p class="c11">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, eius iusto     provident laudantium voluptates adipisci voluptatem amet repudiandae ex aspernatur rem voluptatibus recusandae vero corporis distinctio quia reprehenderit dolores facere.
    </p>
</p>

Upvotes: 1

Views: 186

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240928

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:

<p class="c11">Lorem ipsum dolor...</p>
<p></p>

enter image description here

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.

Upvotes: 5

Related Questions