Les pseudo-classes :first-of-type et :last-of-type.

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

These pseudo-classes let you target the first or last element of a parent, considering only elements of the same type, like just the p tags.

Example of a table with a single row containing th cells and td cells.

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

:first-of-type and :last-of-type are part of a series of pseudo-classes that also allow you to target elements based on their position in the document tree:

:first-child :

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

:last-child :

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

: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.

: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-of-type and :last-of-type.

In the example below, the first and last elements of each type have been highlighted with a colored border, red for the first elements and blue for the last ones.

This second example shows how to target only the first and last elements of a given type, here the p elements.

Browser support (compatibility).

The two pseudo-classes :first-of-type and :last-of-type no longer have any compatibility issues.

Notes:

(1) Internet Explorer treats all unknown types, including custom elements, in the same type.

1

:first-of-type
pseudo-class

2

:last-of-type
pseudo-class

Estimated overall support.

97%

97%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

1

1

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Samsung Internet

Opéra

Safari sur IOS

Firefox

Firefox pour Androïd

Edge

Chrome

Androïd Brower

KaiOS Browser

Chrome pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

History of the pseudo-classes :first-of-type and :last-of-type.

• 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-of-type Introduction of the pseudo-classes :first-of-type and :last-of-type.
  

  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-of-type No changes regarding the pseudo-classes :first-of-type and :last-of-type.
  

  September 29, 2011

  Working Draft.

  

  

  

See also: DOM-related pseudo-classes.

Several pseudo-classes allow targeting one or more elements based on their location in the DOM. Here's the list:

: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).