Targeting the last child in 8 column grid

Question

DOM:

<div class="someGroup">
    <div class="col-md-6">
        <div class="col-md-3 item"></div>
        <div class="col-md-3 item"></div>
        <div class="col-md-3 item"></div>
        <div class="col-md-3 item"></div>
    </div>

    <div class="col-md-6">
        <div class="col-md-3 item"></div>
        <div class="col-md-3 item"></div>
        <div class="col-md-3 item"></div>
        <div class="col-md-3 item"></div> <!-- I want to target this div -->
    </div>
</div>

Is it possible to do with CSS?

I tried using .someGroup .item:last-child, but it also targets the last child of the first col-md-6.

Basically, I need to have 8 equal columns and this was the best approach I could come up with. If any other suggestions, I'm all ears! :)

Answer 1

You also need to ensure you're only selecting the last col-md-6 element.

.someGroup .col-md-6:last-child .item:last-child {}

Demo: http://jsfiddle.net/w83qwtx0/