CSS Selectors: Possible to select ONLY the second element?

Question

Is this even possible?

<div class="column">
    <div> 
        <div> 
        </div>    
        <div> <!-- Definitely not this DIV! -->
        </div>    
    </div>
    <div>     <!-- THIS DIV ONLY! -->
    </div>    
</div>

The following CSS selector gets the one I've marked "Definitely not this DIV!".

.column div:last-child {
    background-color:red;
}

The following CSS selector gets the one I want AND the one I've marked "Definitely not this DIV!".

.column div + div {
    background-color:red;
}

Same goes for this one: It gets the one I want AND the one I've marked "Definitely not this DIV!".

.column div:first-child + div {
    background-color:red;
}

Question: 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.

Answer 1

This should do it.

#column > div:first-child + div

You were using a class selector to select an element with an ID.

You may want to look through the CSS Selectors, as it's the direct descendant & sibling selectors that gives you the finesse to choose a particular DOM element.