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;
}

lili {
    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:

<ulid="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.