" is not allowed as a child of element in this context"

Question

I'm trying to make an unordered-and-ordered mix lists exactly as the following example:

The validator gives me this error:

error: Element “ul” not allowed as child of element “ol” in this context.

here is my code:

ol.numberlist{
   list-style-type: decimal;
}

ul.sqaredotlist{
    list-style-type:square;
}

ol.romanlist{
    list-style-type:lower-roman;
}

       <ol class="numberlist">
            <li>An numbered list</li>
            <li>Containing</li>
               
                <ul class="sqaredotlist">
                    <li>A dotted list</li>
                    <li>Containing</li>
                        
                        <ol class="romanlist">
                            <li>A roman numeral list</li>
                            <li>And some items</li>
                            <li>Like this</li>
                        </ol>
                
                    <li>And some items</li>
                    <li>Like this</li>
               </ul>
            
            <li>And some items</li>
            <li>Like this</li>
        </ol>

It actually works on the browser, but I want to figure out the way to fix it.

Any help will be appreciated.

Yinhao

Answer 1

You can't use ul as a direct child of ol and vice-versa since the permitted element is zero or more li. To make it valid either you have to create a new li(this will assign new number or icon) or append with the previous li element(this won't break your current style).

ol.numberlist {
  list-style-type: decimal;
}

ul.sqaredotlist {
  list-style-type: square;
}

ol.romanlist {
  list-style-type: lower-roman;
}

<ol class="numberlist">
  <li>An numbered list</li>
  <li>Containing

    <ul class="sqaredotlist">
      <li>A dotted list</li>
      <li>Containing

        <ol class="romanlist">
          <li>A roman numeral list</li>
          <li>And some items</li>
          <li>Like this</li>
        </ol>
      </li>
      <li>And some items</li>
      <li>Like this</li>
    </ul>
  </li>
  <li>And some items</li>
  <li>Like this</li>
</ol>

Answer 2

Here is the updated fiddle:

ol.numberlist {
  list-style-type: decimal;
}

ul.sqaredotlist {
  list-style-type: square;
}

ol.romanlist {
  list-style-type: lower-roman;
}

.none {
  list-style-type: none;
}

<ol class="numberlist">
  <li>An numbered list</li>
  <li>Containing</li>
  <li class="none">
    <ul class="sqaredotlist">
      <li>A dotted list</li>
      <li>Containing</li>
      <li class="none">
        <ol class="romanlist">
          <li>A roman numeral list</li>
          <li>And some items</li>
          <li>Like this</li>
        </ol>
      </li>
      <li>And some items</li>
      <li>Like this</li>
    </ul>
  </li>
  <li>And some items</li>
  <li>Like this</li>
</ol>