dt.last-child not working

Question

Here is a fiddle where I'd like to remove the white border:bottom on the last child ('Headline Three').

I tried the following CSS, but it didn't work.

#containerr  dt.last-child {
border-bottom:none;
}

Any idea what I'm doing wrong?

Answer 1

What you were actually looking for was :last-child - however this isn't implemented in the way you would expect. :last-child means that the element must be the last child in the parent, even if the elements that follow are of different classes/types.

What you are actually looking for is the :last-of-type:

#containerr dl dt:last-of-type {
    border-bottom:none;
}

JSFiddle

The only problem being that it isn't supported in IE before V9.

Answer 2

This doesn't answer you question, but provides a workaround the issue.

I tend not to use :last-child (since I use to develop for older browsers - well one older browser - IE). Also I find :last-child a bit awkward to work with.

:first-child is more widely supported (CSS 2) so I prefer using this.

What you do is instead of adding bottom border, you add top border - so the output would be border > content > border > content

Then you use :first-child to remove the top border from the first element, so you're left with content > border > content.

I've copied your fiddle over and made this with two changes:

First, replace bottom border with top border:

#containerr dt {
    [...]
    border-top:1px solid white;
}

Second, use the :first-child to remove the top border from the first dt:

#containerr  dt:first-child {
    border-top:none;
}

Here's a fiddle: http://jsfiddle.net/ninty9notout/et7TW/

Enjoy!