Use CSS to alternate ul bullet point styles

Question

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?

Answer 1

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

Answer 2

You could use separate styles by adding class or id to the ul tags:

<ul class="disk"><!-- use disk -->
  <li>Lorem ipsum</li>
  <li>
    <ul class="circle"><!-- use circle -->
      <li>Lorem ipsum</li>
      <li>
        <ul class="disk"><!-- use disk -->
          <li>Lorem ipsum</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

.disk
{
    list-style-type: disc;
}

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

Or you could add styles to uls depending on how they are nested:

ul
{
    list-style-type:disc;
}

ul li ul
{
    list-style-type:circle;
}

ul li ul li ul
{
    list-style-type:disc;
}

Off the top of my head, so there might be some minor errors, but both these examples should basically work.