Apply style only on child elements in the first level

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 */
}

Answer 2

As long as the parent of the outer ul isn't another li, you can use that as the starting point for your selector (example assuming it's a div):

div > ul > li span {
    /* Whatever */
}