Targeting descendants of paragraph
elements

Question

When I do the following only the word, 'Celebrities', gets a red color.

body > p * {
  background-color: red;
}

<body>
  <p>I have met many <span>Celebrities</span> in my lifetime.
    <p>They</p> all were rich! I have a list
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </p>
</body>

Why is, 'Celebrities', the only thing in red?

From my understanding of descendant selectors the , <ul> and  inside the first  should be red, right?

If I modify the above as follows it works, why?

body > div * {
  background-color: red;
}

<div>I have met many <span>Celebrities</span> in my lifetime.
  <p>They</p> all were rich! I have a list
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</div>

If you try to open second P tag before closing first, DOM will automatically close close first P tag before opening second. And you will and with one closing P extra. For example if you try:
Outer A
Inner
Outer B It will be interpreted in DOM as:
outer A
Inner
Outer B — inemanja, Nov 23 '18 at 23:41

score 9 · Accepted Answer · answered Jan 08 '17 at 22:07

9

p tags cannot be nested inside other p tags. When it parses your markup, it is inserting a (missing) closing p tag before the nested p tag.

<p>I have met many <span>Celebrities</span> in my lifetime. <p>
<p>They</p>

answered Jan 08 '17 at 22:07

RebeccaD

264
2
3

Michael Benjamin · Answer 2 · 2017-01-09T03:16:03.730

5

This is your code:

<p>I have met many <span>Celebrities</span> in my lifetime.
    <p>They</p> all were rich! I have a list 
    <ul>
       <li>one</li>
       <li>two</li>
       <li>three</li>
    </ul>
</p>

But, because the HTML is invalid, this is how the browser parses it:

Notice how the top-level paragraph element is closed before the next paragraph begins.

This behavior is actually defined in the spec:

4.4.1 The p element

Tag omission in text/html

A p element's end tag may be omitted if the p element is immediately followed by an address, article, aside, blockquote, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, nav, ol, p, pre, section, table, or ul, element, or if there is no more content in the parent element and the parent element is not an a element.

In other words, a paragraph element doesn't need a closing tag when followed by a div or another p because a closing tag will be assumed by the browser.

The browser also provides an opening  tag for the stray  tag at the end.

This is why your descendant selector doesn't work. CSS is forced to see these elements as siblings, not descendants.

According to the spec, a paragraph element can only contain phrasing content.

3.2.4.1.5 Phrasing content

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.

a, code, span, input and textarea are examples of phrasing content.

The p and ul are not phrasing content. They are flow content:

3.2.4.1.2 Flow content

Most elements that are used in the body of documents and applications are categorized as flow content.

article, section, footer, div, p and ul are examples of flow content.

Your second example works because the container is a div, which can contain flow content.

edited Jan 09 '17 at 03:16

answered Jan 08 '17 at 22:48

Michael Benjamin

346,931
104
581
701

1

The p and li elements not needing end tags most of the time was one of the very first things I learned when I first started HTML at the tender age of 8, so every time this comes up I'm consciously reminded that not everyone knows this fact. It especially blows my mind that most people seem to think missing end tags are an "error" that browsers need to "recover" from. Missing end tags are only an error in XHTML, and browsers *cannot* actually recover from those errors. – BoltClock Jan 09 '17 at 16:56
1

Also, I took more than a few minutes to dig through my comment history so I could link to [this](http://stackoverflow.com/questions/36739740/what-are-the-drawbacks-of-ignoring-html-and-body#comment61062484_36739905) (and another comment that links to [someone else calling XHTML "old school"](http://stackoverflow.com/questions/36969671/why-dont-these-nested-table-elements-respect-html-hierarchy#comment61495817_36969671)). – BoltClock Jan 09 '17 at 16:57
@BoltClock, I remember learning that, as well. In practice, however, I always use the optional closing tags. It's cleaner, more elegant code, as far as I'm concerned. – Michael Benjamin Jan 09 '17 at 17:04
With regard to XHTML, I remember being very excited about it and adhering to all its strict requirements. Then finding out that most pages are served with a `text/html` MIME type anyway, so using XHTML was pointless. If I recall correctly, the XTHML MIME types never got off the ground because some browsers (IE?) never supported them. – Michael Benjamin Jan 09 '17 at 17:05
1

Yes - IE did not support it until IE9. But, perhaps more importantly, everyone was so used to HTML's leniency that broken tag soup was the norm, especially in dynamic sites, which made the strictness of XHTML very difficult to adjust to. – BoltClock Jan 09 '17 at 17:11
1

I like having all my end tags for the sake of consistency too. But when I'm throwing a quick demo together, I don't think about putting them in unless doing so would change the meaning of the HTML. Then I find myself wondering if I should have put them in so others don't get confused. – BoltClock Jan 09 '17 at 17:17

Targeting descendants of paragraph
elements

2 Answers2

Linked

Targeting descendants of paragraph elements

2 Answers2

Linked

Targeting descendants of paragraph
elements