Why CSS Descendant Combinator doesn't overrides styles of Class Selector

Question

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>

Josh Crozier · Accepted Answer · 2015-12-30 03:40:09Z

5

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>

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.

edited Dec 30, 2015 at 3:40

answered Dec 30, 2015 at 3:24

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ieXcept Over a year ago

Why I can nest div's but cannot do the same for 'p'?

Oriol Over a year ago

@ieXcept Because a document division can contain smaller document divisions, but it makes no sense for a paragraph to contain other paragraphs.

Michael Benjamin Over a year ago

Also, are you sure a p can't be nested in a p. According to the spec, p can exist within flow content, of which p is a part.

Michael Benjamin Over a year ago

@Oriol, I understand it doesn't make sense, but I'm not sure it's invalid.

Josh Crozier Over a year ago

@Michael_B What Oriol said. Also, it doesn't validate. The following error is thrown: "No p element in scope but a p end tag seen."

|

Collectives™ on Stack Overflow

Why CSS Descendant Combinator doesn't overrides styles of Class Selector

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related