Question

I am having trouble getting :last-child to work in my situation.

HTML:

<div class="test">Some content</div>
<div class="test">Some content</div>
<div class="test">Some content</div>
<div class="action">Some other content</div>

CSS:

div.topic {
    border-bottom: 1px solid black;
}

div.topic:last-child {
    border-bottom: none;
}

JSFiddle

The last div.test still has the border at the bottom.
​
The problem I think is that the border-bottom: none applies to the very last div which is div.action and not to the last div of class test.

How can I solve it?

Answer 1

You will have to update your markup in order to achieve desired result. Wrap your unknown items in a wrapper, eg:

Working DEMO

<div id="list">
 <div class="topic">Some content</div>
 <div class="topic">Some content</div>
 <div class="topic">Some content</div>
</div>
<div class="action">Some other content</div>​

then use this CSS:

#list .topic {
 border-bottom: 1px solid black;
}

#list .topic:last-child {
 border-bottom: none;
}