title: CSS Selectors: Possible to select ONLY the second element?
body: <p>Is this even possible?</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="column"&gt;
      &lt;div&gt; 
          &lt;div&gt; 
          &lt;/div&gt;    
          &lt;div&gt; &lt;!-- Definitely not this DIV! --&gt;
          &lt;/div&gt;    
      &lt;/div&gt;
      &lt;div&gt;     &lt;!-- THIS DIV ONLY! --&gt;
      &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>The following CSS selector gets the one I've marked "Definitely not this DIV!".</p>
  
  <pre><code>.column div:last-child {
      background-color:red;
  }
  </code></pre>
  
  <p>The following CSS selector gets the one I want AND the one I've marked "Definitely not this DIV!".</p>
  
  <pre><code>.column div + div {
      background-color:red;
  }
  </code></pre>
  
  <p>Same goes for this one: It gets the one I want AND the one I've marked "Definitely not this DIV!".</p>
  
  <pre><code>.column div:first-child + div {
      background-color:red;
  }
  </code></pre>
  
  <p><strong>Question:</strong> Is this even possible to do with CSS that will be recognized by IE7? (I assume my solution will work with FF, Safari, Chrome, and X:nth-child(n) only works with IE9+) Thanks.</p>