csshtml-lists

Use CSS to alternate ul bullet point styles

I would like to alternate list-style-type properties for ul lists, so that the outer is a disc, then one inner ul list is a circle, than one more inner is a disc, and so on.

Essentially, what I want is this:

<ul><!-- use disc -->
  <li>Lorem ipsum</li>
  <li>
    <ul><!-- use circle -->
      <li>Lorem ipsum</li>
      <li>
        <ul><!-- use disc -->
          <li>Lorem ipsum</li>
        </ul>
      </li>
      <li>Lorem ipsum</li>
    </ul>
  </li>
  <li>Lorem ipsum</li>
</ul>

How would I accomplish this using CSS?

Solution

  • Like this...

    li { list-style: circle; }
li li { list-style: disc; }
li li li { list-style: square; }

    And so on...

    The first level of list items will have the "circle" type marker. The second (embedded) will use "discs". The third level will use squares.

    Simply take the above CSS and change the list-style to suit your needs. You can find a list of list-style types here: http://www.w3schools.com/cssref/pr_list-style-type.asp