I've got a user guide with some nested lists, and I've indented the first unordered list by 2em to keep it off the margins and stand out from body text. However that's inheriting to the next levels of ordered lists, and 2em extra per nesting level is too much. This is my HTML:
<ul>
<li>Level 1
<ul>
<li>Nested</li>
<li>Level 2</li>
</ul>
</li>
</ul>
This is the CSS: the first statement is the inherited rule, the last two are attempts to change only nested lists to reduce indent. Neither works on it's own.
.guide ul{
margin-left:2em;}.
.guide li+ul{
margin-left:1em;}
.guide ul+ul{
margin-left:1em;}
2 answers
point
@PaulBM has it right. Putting a + between selectors means adjacent elements... So if you have a ul directly after another ul that one will be indented less. Your original CSS targeted the second list here:
<ul>
<li>Level 1</li>
<li>Item</li>
</ul>
<ul>
<li>Item</li>
<li>Item</li>
</ul>
The + is a handy thing to have in your toolbox, don't forget about it!
- Thanks! Exactly what I needed to know. I knew about the + operator but wasn't 100% sure how it operated.
points
I think the CSS you are looking for will be...
.guide ul ul {
margin-left:1em;
}
for the nested ul.
