Select ul up to a certain depth

Question

ul, ul ul, ul ul ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

Question: is there selector, so I can use it to apply style for each n-deep ul?

For example:

ul > ul

Answer 1

For starters, the selector ul > ul will not work as ul elements may not be direct children of other ul elements. You'd need to use ul > li > ul in this instance.

What you can do to target specific depth levels is root everything to the first ul element's parent. For example, if your top-level ul was a direct child of the body element, you can simply add body > into your selectors:

body > ul,                           /* Level 1 */
body > ul > li > ul,                 /* Level 2 */
body > ul > li > ul > li > ul { }    /* Level 3 */

For what it's worth though, with the correct specificity the selector ul alone would be enough to apply the style to all your ul elements (if you're not wanting to just target specific depth levels).

A standalone selector to target a specific depth unfortunately does not exist. Perhaps you're approaching this in the wrong way though - why don't you add a class or id attribute to the specific ul you wish to style and use them as the selector instead?

Answer 2

The properties you are applying are usually resets what we do on ul element, so writing something like

ul {
  //Reset properties
}

is more than enough to get it applied across the dom at any level.

Still for some reason if you want to target specific properties at specific levels you need to use > but make sure you cannot write ul > ul which is wrong as you cannot nest a ul element as a direct child to a ul.

So if you want to specifically target ul and not the general reset than use a wrapper element around first level of your ul and use a selector like

.wrapper ul {
  //targets all ul nested under .wrapper
}