title: Apply style only on child elements in the first level
body: <pre><code>&lt;ul&gt;
    &lt;li&gt; &lt;span&gt; apply &lt;/span&gt; &lt;/li&gt;
    &lt;li&gt; &lt;span&gt; apply &lt;/span&gt; &lt;/li&gt;
    &lt;li&gt; 
      &lt;ul&gt;
        &lt;li&gt; &lt;span&gt; ignore &lt;/span&gt; &lt;/li&gt;
        &lt;li&gt; &lt;span&gt; ignore &lt;/span&gt; &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p>Can this be done without specifically resetting the properties on the 2nd level spans?</p>
  
  <p>Tried <code>ul &gt; li span</code> but it doesn't seem to work, I get the styles applied to 2nd level too</p>