Good Way To Style Padding Of Nested Uls That Should Appear At The Same Level

I have this type of structure

• one
• two has children
  • a
  <

Solution 1:

This css:

li {
    padding-left: 5px;
    padding-top: 5px;
}

li li {
    padding-left: 0px;
}

should handle arbitrarily deep nested lists. I made a jsfiddle as an example. (The example uses paddings of 15px to make it more obvious.)

Solution 2:

What you can do is select only the topmost <ul>, and then give only its child (but not grandchild) <li> elements spacing using the CSS > selector.

For example, specifying the topmost element with an id:

HTML:

<ul id="Head">
    <li>one</li>
    <li>
        two has children
        <ul>
            <li>a</li>
            <li>b</li>
        </ul>
    </li>
    <li>
        three has children
        <ul>
            <li>x</li>
        </ul>
    </li>
</ul>

CSS:

#Head > li
{
    padding-left: 5px;
}

And here's the example on jsFiddle.