Question

<ul>
  <li> <span> apply </span> </li>
  <li> <span> apply </span> </li>
  <li> 
    <ul>
      <li> <span> ignore </span> </li>
      <li> <span> ignore </span> </li>
    </ul>
  </li>
</ul>

How can I apply a CSS rule only to span elements from the first level, and make span elements from the nested list ignore the rule?

Can this be done without specifically resetting the properties on the 2nd level spans?

Tried ul > li span but it doesn’t seem to work, I get the styles applied to 2nd level too

Answer 1

Put your list in a wrapping div with an ID, for example <div id="ul-wrapper">, and try:

#ul-wrapper > ul > li > span {
    /* my specific CSS */
}