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
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?
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 which is wrong as you cannot nest a ul > ul
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
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With