CODEWITHSUNDEEP
htmlcss
MIke
MIke

Reputation: 140

Selecting the last-child of the last-child

Ok, so I'm having a little trouble selecting the last child of the last child with css.

A sample of what I have is:

<div class="X">
    <div class= "A">
        <div class="B"></div>
        <div class="C"></div>
        <div class="D"></div>
    </div>
    <div class= "A">
        <div class="B"></div>
        <div class="C"></div>
        <div class="D"></div>
    </div>
    <div class= "A">
        <div class="B"></div>
        <div class="C"></div>
        <div class="D"></div>  <!-- This is the one I want to select -->
    </div>
</div>

I've been playing around trying to select only the last div with class "D" and just can't. I feel like I've just got to be missing something simple.

The end goal is to not display it, but I always end up either not displaying any of the "D" elements, or not displaying the last "A" element.

Could someone show me how to do this?'

EDITED: I forgot the top level element. Added the X div to clarify exactly what I have.

Upvotes: 1

Views: 70

Answers (3)

JRulle
JRulle

Reputation: 7568

Use this selector:

div.A:last-child div.D { ... }

Fiddle

Upvotes: 0

lante
lante

Reputation: 7326

Try:

.A:last-child div:last-child {

see fiddle

Upvotes: 1

tymeJV
tymeJV

Reputation: 104775

You can do:

.A:last-child div:last-child {
    //rules
}

Upvotes: 3

Related Questions