I thought it might be possible to target an item higher up in the DOM without targeting those below it. My goal was to only color the 2nd li and leave the rest black with one rule.
<ul class="mega">
<li>this is top level
<ul>
<li>this is the only item to color
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
<li>fourth item</li>
</ul>
</li>
</ul>
</li>
</ul>
The one rule is:
ul.mega > li > ul > li:nth-of-type(1) {
color: red;
}
But all those below are red as well. So I added a second rule which works, but was hoping to be more economical in my coding. Anyway to do this?
ul.mega > li > ul > li:nth-of-type(1) {
color: red;
}
//second rule
ul.mega > li > ul > li ul {
color: black;
}
Here's a codepen with the code.