I'm trying to create a nested list that starts with a bullet point then lists items with roman numerals and then back to bullet points. Also in my browser my list is very spaced out. Not sure way its not displaying that way here.

 ul li {
     list-style-type: upper-roman;
 }

  <ul>
      <li>Bottles, cans and jars:</li> 
      <ul>
          <li>All bottles, cans and jars must be empty</li>
          <li>Take the lids off of all bottle, cans and jars an rinse them</li>
          <li>Throw all metals lids into the recycling box</li>
      </ul>
      </li>
      <li>
            Leaf and yard waste can be placed in paper bags. 
            You can also use yard waste to make 
            compost for your garden. HOW TO MAKE COMPOST.
      </li>
      <li>Green bins can be used for kitchen waste</li>
 </ul>

CodePudding user response：

• You need to fix your HTML structure: a <ul> cannot contain other <ul> as immediate children, so you need to move <ul><li>All bottles, cans and jars must be empty</li>(etc) into your first <li> element.
• You can apply list-style-type to ul (instead of ul > li) as li will inherit it from its parent ul.
• Use three separate CSS rules to specify the list-style-type separately for top-level, second-level, and third-level <ul> elements and their <li> children.

 *:not(li) > ul { /* top-level <ul> */
     list-style-type: disc;
 }
 ul > li > ul {
    list-style-type: upper-roman;
 }
 ul > li > ul > li > ul {
    list-style-type: circle;
 }

  <ul>
      <li>
            Bottles, cans and jars:

            <ul>
                <li>
                    All bottles, cans and jars must be empty

                    <ul>
                        <li>Third-level nested list</li>
                        <li>Second item</li>
                    </ul>
                </li>
                <li>Take the lids off of all bottle, cans and jars an rinse them</li>
                <li>Throw all metals lids into the recycling box</li>
            </ul>
      </li> 
      <li>
            Leaf and yard waste can be placed in paper bags. 
            You can also use yard waste to make 
            compost for your garden. HOW TO MAKE COMPOST.
      </li>
      <li>Green bins can be used for kitchen waste</li>
 </ul>

CodePudding user response：

You've got an extraneous </li> after "Bottles, cans and jars:". Use the CSS selector to style the nested list items. Note that the ul > li will only select direct children whereas ul li will select any <li> that are inside <ul>, even if there are other elements between them. Also, it looks like you forgot to markup the line item beginning with "Leaf and yard waste".

ul li ul li {
  list-style-type: upper-roman;
}

<ul>
  <li>Bottles, cans and jars:
    <ul>
      <li>All bottles, cans and jars must be empty</li>
      <li>Take the lids off of all bottle, cans and jars an rinse them</li>
      <li>Throw all metals lids into the recycling box</li>
    </ul>
  </li>
  <li>
      Leaf and yard waste can be placed in paper bags. 
      You can also use yard waste to make 
      compost for your garden. HOW TO MAKE COMPOST.
  </li>
  <li>Green bins can be used for kitchen waste</li>
</ul>