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
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
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
}
For starters, the selector
ul > ul
will not work asul
elements may not be direct children of otherul
elements. You'd need to useul > 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-levelul
was a direct child of thebody
element, you can simply addbody >
into your selectors:For what it's worth though, with the correct specificity the selector
ul
alone would be enough to apply the style to all yourul
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
orid
attribute to the specificul
you wish to style and use them as the selector instead?