1

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?

Don Rhummy
  • 24,730
  • 42
  • 175
  • 330

2 Answers2

4

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

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
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.

mydoglixu
  • 934
  • 1
  • 7
  • 25
  • I second this answer. Placing a UL element as a child of a OL but outside of an LI is not valid HTML to begin with, so the browser can freely interpret what that means. It is unfortunate that HTML does this but it does mean the page will render as opposed to giving you an error. – Nelson Jul 11 '14 at 19:24
  • 1
    This is incorrect. While the markup *is* invalid, browsers error recover consistently from this error so this is not the cause of the problem described. Both styles apply to the deeper li in this example: http://jsfiddle.net/6tGvA/2/ – Quentin Jul 11 '14 at 19:25
  • the error is because it's essentially converting the ul tag to a span element and then interpreting the il as part of the ordered list parent – mydoglixu Jul 11 '14 at 19:26
  • It is not converting the ul to a span, it is constructing the DOM exactly as described by the markup (despite it being invalid): http://note.io/1kMdOWM – Quentin Jul 11 '14 at 19:29
  • 'essentially' is wrong, 'not even remotely' would be more accurate. You can tell that the selector for the ul is not being ignored because the question describes it as appearing crossed out in the inspect element view - that means it is being applied and then overridden. – Quentin Jul 11 '14 at 19:32