Skip to: content, navigation

:last-child (CSS selector)

Spec
Version
CSS3
Browser support (more…)
IE7 FF1+ SA1.3+ OP9.5+
None Buggy Buggy 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
5.5 6.0 7.0 1.0 1.5 2.0 1.3 2.0 3.0 9.2 9.5
None None None Buggy Buggy Buggy Buggy Buggy Buggy None Full

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.

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
Status:
This note has not yet been confirmed for accuracy and relevance.

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.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

Search