The pseudo-classes :first-child and :last-child.

Description of the pseudo-classes :first-child and :last-child.

These pseudo-classes let you target elements based on their position in the document tree:

• :first-child: the elements that are the first children of their parent.
• :last-child: of course the last children of their parent.

Example of a table with a single row (tr) containing five td cells.

Other pseudo-classes related to the order in the source document.

All these pseudo-classes also allow you to target elements based on their position in the document tree:

:nth-child() :

Pseudo-class targeting a descendant based on its position in the document order.

:nth-last-child() :

Pseudo-class targeting an element based on its number, starting from the end, and in document order.

:only-child :

Pseudo-class targeting elements that are the only children of their parent.

:first-of-type :

Pseudo-class targeting the first elements of each type, in the order of the document.

:last-of-type :

Pseudo-class targeting the last elements of each type in the document order.

:nth-of-type() :

Pseudo-class targeting an element based on its number, counting only elements of the same type.

:nth-last-of-type() :

Pseudo-class targeting an element by its number, counting only elements of the same type and starting from the end.

:only-of-type :

Pseudo-class indicating elements that are the only child of their parent, considering only elements of the same type.

Examples with the pseudo-classes :first-child and :last-child.

Example 1 - Simple use of :first-child and :last-child.

In the example below, the first and last items were highlighted with a colored border.

Example 2 - Combination with a tag selector.

This second example is more complex: the descendants of the #example2 block are of different types: p tags and div tags. The div:first-child selector used in the CSS no longer targets any element because the first child is not a div. On the other hand, the div:last-child selector does target the last element because it is indeed a div tag.

If that’s a problem for you, check out the pseudo-classes :first-of-type and :last-of-type which work by type of identical tags.

Browser support (compatibility).

The pseudo-classes :first-child and :last-child themselves no longer have any compatibility issues. There are still gaps with some browsers when it comes to elements without a parent.

Notes:

(1) On Internet Explorer, when an element is added dynamically by clicking on a link, the :first-child pseudo-class is not applied as long as the link is active.

1

:first-child
:last-child
pseudo-class

2

:first-child
:last-child
No parent

Estimated overall support.

97%

83%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

1

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Edge

Chrome

KaiOS Browser

Opéra

Safari

Androïd Brower

Firefox

Safari sur IOS

Chrome pour Androïd

Firefox pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

history of the pseudo-classes :first-child and :last-child.

The pseudo-classes :first-child and :last-child have been around since version 2 of the CSS language, and their specification hasn't changed since.

• Cascading Style Sheets Level 2 - Revision 1 Specification

  This level 2 of the specification describes the mechanism of cascading styles in CSS. This language is used to format HTML or XML documents. It supports media-specific style sheets so that authors can adapt the presentation of their documents for visual browsers, auditory devices, printers, braille devices, portable devices, etc.

  Regarding :first-child Initial definition of the :first-child and :last-child pseudo-classes in version 2 of the CSS language.
  

  November 04, 1997

  Working Draft.

  

  March 24, 1998

  Proposed for recommendation.

  

  May 11, 1998

  Recommendation .

• Selectors Level 3

  This document describes the selectors that already exist in CSS1 and CSS2, and further introduces new selectors for CSS3 and other languages that may need them.

  Regarding :first-child No change regarding the :first-child and :last-child pseudo-classes.
  

  August 03, 1999

  Working Draft.

  

  November 13, 2001

  Candidate Recommendation.

  

  December 15, 2009

  Proposed for recommendation.

  

  September 29, 2011

  Recommendation .

• Selectors Level 4

  This specification module defines new selectors that can be used in CSS.

  Regarding :first-child No change regarding the :first-child and :last-child pseudo-classes.
  

  September 29, 2011

  Working Draft.

  

  

  

See also: DOM-related pseudo-classes.

Many other pseudo-class selectors allow you to target an element based on its position in the DOM (document tree). This list lets you quickly access their description.

:empty

Pseudo-class targeting elements without content.

:first-child

Pseudo-class targeting the first child of an element, in the document order.

:first-of-type

Pseudo-class targeting the first elements of each type, in the order of the document.

:last-child

Pseudo-class targeting the last child of an element in the document order.

:last-of-type

Pseudo-class targeting the last elements of each type in the document order.

:nth-child()

Pseudo-class targeting a descendant based on its position in the document order.

⚠

:nth-col()

Pseudo-class targeting one of the columns in a grid container based on its number.

:nth-last-child()

Pseudo-class targeting an element based on its number, starting from the end, and in document order.

⚠

:nth-last-col()

Pseudo-class targeting one of the columns in a grid container, starting the count from the end.

:nth-last-of-type()

Pseudo-class targeting an element by its number, counting only elements of the same type and starting from the end.

:nth-of-type()

Pseudo-class targeting an element based on its number, counting only elements of the same type.

:only-child

Pseudo-class targeting elements that are the only children of their parent.

:only-of-type

Pseudo-class indicating elements that are the only child of their parent, considering only elements of the same type.

:root

Pseudo-class targeting the root element of the document (in HTML, the root element is the HTML element).

:scope

Targets the current element. Useful inside an @scope directive.

::part()

Pseudo-element that targets a sub-element in the page's shadow tree (created by template).