Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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

:first-of-type
:last-of-type

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

Description rapide
Pseudo-classe désignant les premiers éléments de chaque type.
Statut
Standard
Module W3C
Sélecteurs
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: REC (recommandation)

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.

Pseudo-classes :first-child, :last-child, :nth-child(), :nth-last-child() et :only-child
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.

Pseudo-classes :first-of-type, :last-of-type, :nth-of-type(), :nth-last-of-type() et :only-of-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.

div

p

p

div
div

 

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

div

p

p

div
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
:first-of-type
2
:last-of-type
Estimation de la prise en charge en pourcentage du parc actuel.
98%
98%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi : pseudo-classes relatives au DOM.

  • :root :
  • Pseudo-classe désignant l'élément racine.

  • :empty :
  • Pseudo-classe désignant les éléments sans contenu.

  • :first-child :
  • Pseudo-classe désignant le premier enfant d'un élément.

  • :last-child :
  • Pseudo-classe désignant le dernier enfant d'un élément.

  • :nth-child() :
  • Pseudo-classe désignant un descendant d'après son numéro.

  • :nth-last-child() :
  • Pseudo-classe désignant un élément à partir de son numéro, en commençant par la fin.

  • :only-child :
  • Pseudo-classe désignant les éléments qui sont fils uniques de leur parent.

  • :first-of-type :
  • Pseudo-classe désignant les premiers éléments de chaque type.

  • :last-of-type :
  • Pseudo-classe désignant les derniers éléments de chaque type.

  • :nth-of-type() :
  • Pseudo-classe désignant un élément à partir de son numéro en ne comptant que les éléments du même type.

  • :nth-last-of-type() :
  • Pseudo-classe désignant 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.

  • :only-of-type :
  • Pseudo-classe désignant les éléments qui sont fils unique dans leur type.