:first-child and :last-child

Back to the index.

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 {color: red;}
This is the div id="test". The first paragraph should be underlined; the last red.

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.

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