CODEWITHSUNDEEP
csscss-selectors
Jeroen
Jeroen

Reputation: 544

How to change the CSS from the last child?

I've got the following code (http://jsfiddle.net/Jeroen94/9D6Z6/): 

<div class="inbox">‌
    <div class="something 1">
        <a class="inbox-message">Message 1</a>
    </div>
    <div class="something 2">
        <a class="inbox-message">Message 2</a>
    </div>
</div>

.inbox-message {
    border: 0;
    border-bottom: 1px solid #ccc;
}
.inbox a:last-child {  /* This doesn't work... */
    border: 0;
}

I'd like to remove the border from the last message (in this case the second one), but I don't succeed in doing it, because I don't really understand how to work with last-child.

How can I do this?

Upvotes: 0

Views: 23

Answers (2)

reinhoc
reinhoc

Reputation: 29

You need to add the inbox-message class onto the code.

<div class="inbox">‌
    <div class="something 1">
        <a class="inbox-message">Message 1</a>
    </div>
    <div class="something 2">
        <a class="inbox-message">Message 2</a>
    </div>
</div>

.inbox-message {
    border: 0;
    border-bottom: 1px solid #ccc;
}
.inbox .inbox-message a:last-child {  /* This doesn't work... */ border: 0;}

Upvotes: 0

j08691
j08691

Reputation: 207881

Change the rule to:

.inbox :last-child a{
    border: 0;
}

jsFiddle example

You could also have done .inbox div:last-child a{, but it's not necessary in this case.

Upvotes: 2

Related Questions