Nested Lists and CSS Descendant Selectors

Examples

Descendant CSS selectors are getting much more popular in CSS style sheets because they give you a lot more control over precisely which elements you want to style. Add to that that child selectors and sibling selectors weren't widely supported until recently, and that adds to their popularity. But descendant selectors often select more than what you intend - with strange results.

• Did You Mean to Display it This Way?
• How to Fix It

Did You Mean to Display it This Way?

If you look at the following list, with an embedded list, it looks like I've embedded one ordered list inside another. But as you'll see from the HTML, the inner list is a bulleted list.

1. An ordered list
2. With 3 elements
3. And one nested list inside it:
   • An unordered list
   • With 2 bullet points

The HTML:

<ol>
<li>An ordered list</li>
<li>With 3 elements</li>
<li>And one nested list inside it:
  <ul>
  <li>An unordered list</li>
  <li>With 2 bullet points</li>
  </ul></li>
</ol>

The CSS:

ol li { list-style-type: decimal; }

Return to the CSS Selector Errors Article

How to Fix It

Use the same HTML, but change your CSS selector to a child selector.

1. An ordered list
2. With 3 elements
3. And one nested list inside it:
   • An unordered list
   • With 2 bullet points

The CSS:

ol > li { list-style-type: decimal; }

Return to the CSS Selector Errors Article