:last-child issue when adding a footer after a section

Question

Right, so this is strange. This code works as expected:

HTML:
<section>
    Section #1
</section>

<section>
    Section #2
</section>

<section>
    Section #3
</section>

CSS:
section{
    margin-right: 30px;
}
section:last-child{
    margin-right: 0;
}

The first two sections get a right margin of 30px, while the third section doesn't get a right margin.

Now, if I add a footer element after the last section, the :last-child will be ignored. That way, all three sections will have a right margin of 30px. This holds true in both Mozilla and Webkit.

Has anyone got a clue why this is, and how it can be fixed?

Thanks!

- Erik

Answer 1

:last-child means last child, it has no bearing on the rest of the selector, it's an independent restriction. This means it has to be the last child, regardless of element type or class, etc...it is literally the last child element. Since your footer is after this, there's no matching element that's both a <section> and a :last-child.

The selector for this is :last-of-type, but it's not as widely supported.