Les pseudo-classes :first-child et :last-child.

:first-child
:last-child

Résumé des caractéristiques du sélecteur :first-child

Description rapide
Pseudo-classe ciblant le premier enfant d'un élément dans l'ordre du document.
Statut
Standard
Module W3C
Sélecteurs
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: REC (recommandation)
Statut du document: REC (recommandation)

Description des pseudo-classes :first-child et :last-child.

Ces pseudo-classes permettent de cibler des éléments en fonction de leur emplacement dans l'arbre du document :

  • :first-child : les éléments qui sont les premiers enfants de leur parent.
  • :last-child : bien sûr les derniers enfants de leur parent.

Pseudo-classes :first-child et :last-child
Exemple d'un tableau comportant une seule ligne (tr) avec cinq cellules td.

Autres pseudo-classes relatives à l'ordre dans le document source.

Toutes ces pseudo-classes permettent également de cibler des éléments en fonction de leur position dans l'arbre du document :

Pseudo-classe ciblant un descendant d'après son numéro dans l'ordre du document.
Pseudo-classe ciblant un élément à partir de son numéro, en commençant par la fin, et dans l'ordre du document.
Pseudo-classe ciblant les éléments qui sont fils uniques de leur parent.
Pseudo-classe ciblant les premiers éléments de chaque type, dans l'ordre du document.
Pseudo-classe ciblant les derniers éléments de chaque type, dans l'ordre du document.
Pseudo-classe ciblant un élément à partir de son numéro en ne comptant que les éléments du même type.
Pseudo-classe ciblant un élément à partir de son numéro en ne comptant que les éléments du même type et en commençant par la fin.
Pseudo-classe désignant les éléments qui sont fils unique de leur parent, en ne considérant que les éléments de type identique.

Exemples avec les pseudo-classes :first-child et :last-child.

Exemple 1 - Usage simple de :first-child et :last-child.

Dans l'exemple ci-dessous, le premier et le dernier éléments ont été distingués par une bordure colorée.

p

div

p

div
div

Exemple 2 - Combinaison avec un sélecteur de balise.

Ce deuxième exemple est plus complexe : les descendants du bloc #example2 sont de types différents : des balises p et des balises div. Le sélecteur div:first-child utilisé dans le CSS ne cible plus aucun élément car le premier enfant n'est pas un div. Par contre les sélecteur div:last-child cible bien le dernier élément car il s'agit bien d'une balise div.

Si cela vous pose un problème, reportez-vous aux pseudo-classes :first-of-type et :last-of-type qui fonctionnent par type de balises identiques.

p

div

p

div
div

Prise en charge par les navigateurs (compatibilité).

Les pseudo-classes :first-child et :last-child en elles-mêmes ne présentent plus aucun problème de compatibilité. Il reste des lacunes avec certains navigateurs dans le cas des éléments sans parent.

Colonne 1
Support par les navigateur de la pseudo-classe :first-child qui cible le premier enfant d'un élément.
Colonne 2
Support par les navigateurs de la pseudo-classe :first-child qui cible le premier élément même si ce dernier n'a pas de parent.

Remarques :

(1) Sur Internet Explorer, lorsqu'un élément est ajouté dynamiquement par un clic sur un lien, la pseudo-classe :first-child n'est pas appliqué tant que le lien est actif.

1
Pseudo-classes
:first-child
:last-child
2
:first-child
:last-child
Éléments sans parent
Estimation de la prise en charge globale.
97%
83%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

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

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Historique des pseudo-classes :first-child et :last-child.

Les pseudo-classes :first-child et :last-child existent depuis la version 2 du langage CSS, et leur spécification n'a pas évolué depuis.

  • CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

    Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.

    Concernant :first-child Définition initiale des pseudo-classes :first-child et :last-child dans la version 2 du langage CSS.
    WD
    04 Novembre 1997
    Document de travail.
    PR
    24 Mars 1998
    Proposé à la recommandation.
    REC
    11 Mai 1998
    Recommandation.

  • Sélecteurs - Niveau 3

    Ce document décrit les sélecteurs qui existent déjà dans CSS1 et CSS2, et présente en plus de nouveaux sélecteurs pour CSS3 et d'autres langages qui pourraient en avoir besoin.

    Concernant :first-child Pas de changement concernant les pseudo-classes :first-child et :last-child.
    WD
    03 Août 1999
    Document de travail.
    CR
    13 Novembre 2001
    Candidat à la recommandation.
    PR
    15 Décembre 2009
    Proposé à la recommandation.
    REC
    29 Septembre 2011
    Recommandation.

  • Sélecteurs - Niveau 4

    Ce module de spécification définit de nouveaux sélecteurs utilisables en CSS.

    Concernant :first-child Pas de changement concernant les pseudo-classes :first-child et :last-child.
    WD
    29 Septembre 2011
    Document de travail.
    CR
    PR
    REC

Voir aussi : pseudo-classes relatives au DOM.

De nombreux autres sélecteurs par pseudo-classe permettent de désigner un élément en fonction de sa position dans le DOM (arbre du document). Cette liste vous permet d'accéder rapidement à leur description.

:empty
Pseudo-classe ciblant les éléments sans contenu.
:first-child
Pseudo-classe ciblant le premier enfant d'un élément dans l'ordre du document.
:first-of-type
Pseudo-classe ciblant les premiers éléments de chaque type, dans l'ordre du document.
:last-child
Pseudo-classe ciblant le dernier enfant d'un élément, dans l'ordre du document.
:last-of-type
Pseudo-classe ciblant les derniers éléments de chaque type, dans l'ordre du document.
:nth-child()
Pseudo-classe ciblant un descendant d'après son numéro dans l'ordre du document.
⚠
:nth-col()
Pseudo-classe ciblant une des colonnes dans un container grille d'après son numéro.
:nth-last-child()
Pseudo-classe ciblant un élément à partir de son numéro, en commençant par la fin, et dans l'ordre du document.
⚠
:nth-last-col()
Pseudo-classe ciblant une des colonnes dans un container grille, en commençant le comptage par la fin.
:nth-last-of-type()
Pseudo-classe ciblant un élément à partir de son numéro en ne comptant que les éléments du même type et en commençant par la fin.
:nth-of-type()
Pseudo-classe ciblant un élément à partir de son numéro en ne comptant que les éléments du même type.
:only-child
Pseudo-classe ciblant les éléments qui sont fils uniques de leur parent.
:only-of-type
Pseudo-classe désignant les éléments qui sont fils unique de leur parent, en ne considérant que les éléments de type identique.
:root
Pseudo-classe ciblant l'élément racine du document (en HTML, l'élément racine est l'élément HTML).
:scope
Cible l'élément courant. Utile à l'intérieur d'une directive @scope.
::part()
Peudo-élément qui cible un sous-élément dans l'arbre fantôme de la page (créé par template).