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

Description des pseudo-classes :first-of-type et :last-of-type.

Ces pseudo-classes permettent de cibler des éléments en fonction de leur emplacement dans l'arbre du document, et en ne considérant que les éléments du même type, par exemple que les balises p :

• :first-of-type : les éléments qui sont les premiers enfants de leur parent dans un même type.
• :last-of-type : les éléments qui sont les derniers enfants de leur parent dans un même type.

Autres pseudo-classes comparables.

:first-of-type et :last-of-type font partie d'une série de pseudo-classes qui permettent également de cibler des éléments en fonction de leur position dans l'arbre du document :

• :first-child : le premier enfant du parent.
• :last-child : le dernier enfant du parent.
• :nth-child() : les enfants qui sont en une position donnée parmi les enfants du parent.
• :nth-last-child() : les enfants qui sont en position donnée en commençant le comptage par la fin.
• :only-child : les éléments qui sont 'fils unique', c'est à dire dont le parent n'a pas d'autres enfants.

Les éléments ciblés par les pseudo-classes ...child dans le cas d'un tableau
comportant sept colonnes et une seule ligne.
 

• :nth-of-type() : les éléments qui sont en une position donnée parmi les éléments du même type.
• :nth-last-of-type() : les éléments qui sont en une position donnée parmi les éléments du même type, en commençant le comptage par la fin.
• :only-of-type désigne les éléments dont le parent n'a pas d'autres enfants du même type.

Exemple d'un tableau comportant des cellules th et des cellules td.
 

Exemple avec les pseudo-classes :first-of-type et :last-of-type.

Dans l'exemple ci-dessous, le premier et le dernier éléments de chaque type ont été distingués par une bordure colorée, de couleur rouge pour les premiers éléments, et de couleur bleue pour les derniers.

Ce deuxième exemple montre comment ne cibler que les premier et dernier éléments d'un type donné, ici les éléments div.

Prise en charge par les navigateurs (compatibilité).

Les deux pseudo-classes :first-of-type et :last-of-type ne présentent plus aucun problème de compatibilité.

1

Pseudo-classe
:first-of-type

2

Pseudo-classe
:last-of-type

Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Opéra Mobile

KaiOS Browser

Edge

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Opéra

Safari

Safari sur IOS

Chrome

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

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

Caniuse

Caniuse

Voir aussi : pseudo-classes relatives au DOM.

: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.
: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 dans le cas de règles imbriquées (nested CSS).
::part()
Peudo-élément qui cible un sous-élément dans l'arbre fantôme de la page (créé par template).