Question

I have a list within a list, but I don’t want the inner list to receive the outer list’s styles. This is my code:

CSS:

li {
    background-color:red;
}

#sections li {
    color:blue;
}

HTML:

<ol id="sections">
<li>Item 1</li>
<li>Item 2</li>
<li>
<ol><li>Item A</li>
<li>Item C</li>
</ol>
</ol>

I could just set color to whatever my default is, but that’s sort of a hack, and in the future if i add something to the #sections li style it could mess with the inner list style, so I presume this is bad coding form.

How do i make the inner list be unaffected by the outer list?

Answer 1

May want to instead do a new style for nested lists, like this:

ol ol li,
ol ul li,
ul ol li,
ul ul li
{
    /* Nested list styles */
    background: #FFF;
    color: #000;
}

You could also use the > child selector to just target top level <li>s:

ol#selections > li
{
    color: blue;
}