CODEWITHSUNDEEP
htmlcss
Don Rhummy
Don Rhummy

Reputation: 25830

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")?

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?

Upvotes: 1

Views: 679

Answers (2)

Quentin
Quentin

Reputation: 943598

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.)

Upvotes: 4

mydoglixu
mydoglixu

Reputation: 944

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.

Upvotes: 2

Related Questions