:last-child (CSS selector)

Spec
Version
CSS3
Browser support (more…)
IE8 FF3+ SA3.1+ OP9.5+ CH2+
None Full Full Full Full

Syntax

:last-child {
declaration block
}

Description

This pseudo-class is analogous to the :first-child pseudo-class that was included in CSS2. It matches an element that’s the last child element of its parent element, and as such, the pseudo-class is equivalent to :nth-last-child(1).

Example

This selector will match any paragraph that’s the last child element of its parent element:

p:last-child {
  ⋮ declarations
}

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
None None None None Buggy Buggy Buggy Full Full Buggy Buggy Full Full None Full Full Full

In Firefox versions up to and including 2, this selector continues to select the same element even after another element is dynamically inserted after it.

In Safari versions up to and including 3, this selector will match all elements that are child elements—not just the last child element.

User-contributed notes

ID:
#1
Contributed:
by haaiee
Date:
Fri, 18 Jul 2008 10:31:44 GMT

You say: "In Firefox versions up to and including 2, this selector continues to select the same element even after another element is dynamically inserted before it."

If you add an element before the last-child, it will still be the last-child. So if Firefox continues to select the same element, this is correct behaviour.

Related Products