Why is CSS for “ol li” overriding that for “ul li” for a bullet that's in an “ul” (but under an “li” that's in an “ol”)?

Question

I have the following HTML:

<ol>
    <li>A numbered bullet</li>
    <ul>
        <li>An un-numbered bullet</li>
    <ul>
</ol>

But it shows like this:

1. A numbered bullet
    1. An un-numbered bullet

When I do an "inspect element", it shows the ul li styles crossed out and overriden by ol li . Why?

Answer 1

it shows the ul li styles crossed out and overriden by ol li.

Since the ul is inside the ol , the li is a descendant of both the list elements, so both selectors will apply.

The two selectors have equal specificity , so they are applied in order .

You have defined the ol li styles after the ul li styles in the stylesheet, so they override the earlier ones.

You could use a more specific selector to target the deeper list:

ol ul li { }

Or you could use a child combinator instead of a descendant combinator:

ol > li {}
ul > li {}

(Note that it is invalid HTML to have a ul as a child of a ol . The nested list should appear within a li .)

Answer 2

If you put your <ul> inside the <li> it will work:

<ol>
    <li>First level element, ordered
        <ul>
            <li>Unordered list</li>
        </ul>
    </li>
</ol>

http://jsfiddle.net/6tGvA/

In your version, the unordered list isn't nested in the li item for proper indentation, thus the ul is ignored.