title: CSS - First child without certain class
body: <p>Is it possible to write a CSS rule to select the first child of an element without a specific class?</p>
  
  <p>example:</p>
  
  <pre><code>&lt;div&gt;
      &lt;span class="common-class ignore"&gt;&lt;/span&gt;
      &lt;span class="common-class ignore"&gt;&lt;/span&gt;
      &lt;span class="common-class"&gt;&lt;/span&gt;
      &lt;span class="common-class"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In this case I would like to select the first <code>span</code> without class <code>ignore</code>.
  I tried this, but didn't seem to work:</p>
  
  <pre><code>.common-class:first-child:not(.ignore) {
      ...some rules...
  }
  </code></pre>
  
  <p><strong>UPDATE</strong>:</p>
  
  <p>If I add a class to the parent div named <code>parent-class</code>, a modified version of the selector suggested by Jukka works except when the first <code>span</code> with class <code>ignore</code> comes after the first one without. The above-mentioned selector is the following:</p>
  
  <pre><code>.parent-class &gt; .common-class.ignore + .common-class:not(.ignore) {
      ...some rules...
  }
  </code></pre>