Apply style only on child elements in the first level

css

Solution

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

Problem

``` <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

Original source