An 'Ul' Element Can Never Be a Child of a 'P' Element

An 'ul' element can never be a child of a 'p' element

Please check the HTML specification, which clearly states that putting lists in a paragraph element is forbidden, and also give some examples on what could be done:

List elements (in particular, ol and ul elements) cannot be children of p elements. When a sentence contains a bulleted list, therefore, one might wonder how it should be marked up.

For instance, this fantastic sentence has bullets relating to

wizards,
faster-than-light travel, and

telepathy,

and is further discussed below.

The solution is to realise that a paragraph, in HTML terms, is not a
logical concept, but a structural one. In the fantastic example above,
there are actually five paragraphs as defined by this speciication:
one before the list, one for each bullet, and one after the list.

The markup for the above example could therefore be:
  <p>For instance, this fantastic sentence has bullets relating to</p> 
   <ul>
       <li>wizards,  
       <li>faster-than-light travel, and  
       <li>telepathy, 
   </ul>
   <p>and is further discussed below.</p>
Authors wishing to
conveniently style such "logical" paragraphs consisting of multiple
"structural" paragraphs can use the div element instead of the p
element.

Thus for instance the above example could become the following:
   <div>For instance, this fantastic sentence has bullets relating to
   <ul>
     <li>wizards,  
     <li>faster-than-light travel, and  
     <li>telepathy,
   </ul> 
   and is further discussed below.</div> 
This example still has
five structural paragraphs, but now the author can style just the div
instead of having to consider each part of the example separately.

Should ol/ul be inside p or outside?

The short answer is that ol elements are not legally allowed inside p elements.

To see why, let's go to the spec! If you can get comfortable with the HTML spec, it will answer many of your questions and curiosities. You want to know if an ol can live inside a p. So…

4.5.1 The p element:
Categories: Flow content, Palpable content.

Content model: Phrasing content.

4.5.5 The ol element:
Categories: Flow content.

Content model: Zero or more li and script-supporting elements.

The first part says that p elements can only contain phrasing content (which are “inline” elements like span and strong).

The second part says ols are flow content (“block” elements like p and div). So they can't be used inside a p.

ols and other flow content can be used in in some other elements like div:

4.5.13 The div element:
Categories: Flow content, Palpable content.

Content model: Flow content.

Allowed child elements of ul

It is not valid in any version of HTML, see e.g. HTML 4.01 on ul.

Browsers allow it, though, and parse it so that div becomes a child of ul, and they let you style the div too. This is probably the reason why this markup has been used.

Element h4 not allowed as child of element ul in this context?

According to HTML5 spec, you can't have header tags as children within a <ul></ul>, you should populate it with <li></li>, then insert your content within each list like so:

<ul>
  <li><h4 class="footerr">SUPPORT</h4></li>
  <li><a href="http://timberlife.nl/contact/" style="color: rgb(255,255,255);">CONTACT</a></li>
  <li><a href="http://timberlife.nl/faq/" style="color: rgb(255,255,255);">FAQ</a></li>
  <li><a href="http://timberlife.nl/disclaimer/" style="color: rgb(255,255,255);">DISCLAIMER</a></li>
</ul>

I also noticed you have wrapped entire blocks of content within header tags, try to avoid that as it also leads to invalid html. Use divs rather.

Reference: w3.org ul element

Why won't this CSS selector work for li when inside p tag?

It's because ol/ul items aren't allowed inside of p elements.

Should ol/ul be inside <p> or outside?

Seems like a trick question for your exam then. Most likely you will want to brush up on the HTML spec since the question isn't truly based on CSS knowledge alone.

You are getting the described behavior because <p> cannot contain block-level elements such as <ul> or <ol>. The browser (e.g., Chrome) knows this is not possible and thus try to handle your illegal structure by placing your block element in between two paragraphs:

Sample Image

Because of this, the rule you have declared for that li does not apply.

p ul li {  color: blue;}

<p>  Hello  <ul>    <li>I'm never blue.</li>  </ul>  Goodbye</p>

Nesting a ul /ul within a p /p creates two paragraphs. Why?

Paragraphs may not contain block-level elements. Some browsers apparently assume you've made a mistake and attempt to correct it.

Read more

nth-last-child selector not working

You cannot have a <ul> inside a <p> tag! So when you put <p><ul></ul></p>, the browser considers it as <p></p><ul></ul>.

So technically, there's and cannot be <ul> inside a <p> so your CSS selector never ever selects an element under any case in HTML.

So, consider changing the element to <div> instead.

Proof:

p {color: red;}ul {color: blue;}p ul {color: green;}

<p>This is para</p><p>  The next UL element will be kicked out of P. Before UL.  <ul><li>This is LI inside UL inside P</li></ul>  After UL. And this becomes normal text under the body, and not under P.</p><ul><li>This is LI inside UL</li></ul>

An 'Ul' Element Can Never Be a Child of a 'P' Element