There is an ul menu:

<ul class="first-lvl"> <li>1 <ul class="second-lvl"> <li>1 > 1</li> <li>1 > 2</li> </ul> </li> <li>2</li> <li>3</li> <li>4</li> </ul>

with two levels, so here I apply styles with such selectors:

 first-lvl.ul {} first-lvl.ul li {} first-lvl.ul li a {}

The problem is that styles from the first level go to the second level, and you have to reset the registered styles in the new selector: margin, padding, etc.

Is it possible to somehow ensure that styles are not distributed to the second level of the menu?

1 answer 1

Everything works fine, understand, here it’s rather not inheritance, but as an example in my code, the upper-level li background covers the lower-level li , unless it is overlaid by other styles.

 ul.first-lvl > li { background-color: tomato; } ul > li> ul > li { background-color: green; } /* или */ /* ul.first-lvl > li> ul.second-lvl > li { background-color: yellow; } */ 
 <ul class="first-lvl"> <li>1 <ul class="second-lvl"> <li>1 > 1</li> <li>1 > 2</li> </ul> </li> <li>2</li> <li>3</li> <li>4</li> </ul>