This is your code:
I have met many Celebrities in my lifetime.
They
all were rich! I have a list
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 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.
