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

Voight

What do you mean with "each n-deep ul"? Do you want to set a style for each ul at a specific level? What doesn't work with the solution you have? Can you give an example of the expected outcome and the actual outcome of your current solution? – Dunkin

when I use ul, ul ul, ul ul ul, ul ul ul ul, ... it is for 4-deep solution. What if I have 20-deep ul? I dont want to define all of them – Voight

If you have more that 3 deep ul you probably need to rethink your approach in the first place...but other than that...no there isn't. – Linsk

This would be simpler by defining a class and applying that class to the ul that you want – Wherewithal

If you want to style differently each UL n-level, use CssClasses, otherwise, you need to type ul > li > ul > li > ul ... {} However, if you want to style all the levels exactly the same, just ul {} will work. – Hamiltonian

It looks like you are trying to apply the same styles for the n-deep ul. Why don't you just target ul alone? Like #id ul ? or if you need to target a ul in another ul then just do #id ul ul, that should cover your bases, assuming you are trying to apply the same style to the ul like the example you have given – Biondo

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?

Pelasgian

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
}

Caterer

yea I think people are over thinking this – Biondo

I was going down this line too. Here's an example I was creating: jsfiddle.net/fdvfzoxz – Ashelman