:first-child and :last-child

Not supported by Explorer 6- on Windows.

Explorer 7, Safari 3.0, iCab only support :first-child.

Opera handles a dynamic :first-child correctly, but not a :last-child.

How to select an element that is the first or last child of its parent.

The :first-child pseudo class means "if this element is the first child of its parent". :last-child means "if this element is the last child of its parent". Note that only element nodes (HTML tags) count, these pseudo-classes ignore text nodes.

Testsheet:

div#test p:first-child {text-decoration: underline;}
div#test p:last-child {font-weight: bold;}
This is the div id="test". The first paragraph should be underlined; the last bold.

First paragraph.

Second paragraph.

Dynamic

What happens when we dynamically add paragraphs to the div? The browsers should re-evaluate the styles of all paragraphs. Only Explorer and iCab actually do so.

Add paragraph at start or add paragraph at end of test div.