CSS3 Selectors :last-child

Of all the CSS3 selectors the structural pseudo-classes have to be my favorite. In particular I love :last-child. The :last-child CSS selector is increabily powerful especially when positioning elements in a row. Instead of providing a last class on the very last element in the row, you can now use pure CSS to achieve the same effect.

CSS 2.1

/*Each Element*
.image { margin-right: 5px; height: 20px; width: 20px; float:left; background-color: red; }
/* remove the margin on the last element so it lines up
.image.last { margin-right: 0px; }

CSS 3

/* parent of the image element */
.parent div:last-child { margin-right: 0px; }

The Downside

Unfortunatly the bad aspect of this selector is that it does not fail gracefully. Meaning that a user in a none CSS3 complient browser (IE) it will fail horribly for, this means that everything will be out of line.

Example

If you look at this in anything but Firefox the last element will be on the next line.