: problem with last child when adding footer after section

Question

Right, so it's weird. 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 the right edge of 30px, and the third section doesn't get the right margin.

Now, if I add a footer item after the last section, the last item will be ignored. Thus, all three sections will have a right edge of 30px. This is true in both Mozilla and Webkit.

Has anyone understood why this is so, and how can it be fixed?

Answer 1

:last-child means the last child, it is not related to the rest of the selector, this is an independent restriction. This means that it must be the last child, regardless of the type of element or class , etc .... it is literally the last child. Since your footer is after this, there is no corresponding element, which is both <section> and :last-child .

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