Select ul to a specific depth

Question

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

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

For example:

 ul > ul 

Answer 1

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

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

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

For what's worth it, but with the right specificity, a single ul selector would be enough to apply style to all your ul elements (unless you just want to target certain depth levels).

An autonomous selector for the target depth, unfortunately, does not exist. You may be approaching this incorrectly, but why don't you add the class or id attribute to the specific ul you want to use and use instead as a selector?

Answer 2

The properties you apply usually dump what we do on the ul element, so we write something like

 ul { //Reset properties } 

more than enough to make it apply through dom at any level.

For some reason, if you want to target certain levels at certain levels, you need to use > , but make sure you cannot write ul > ul , which is wrong, since you cannot insert ul as a direct child.

So, if you want to specifically target ul rather than general reset, than use a shell element around the first level of your ul and use a type selector

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