Les pseudo-classes :first-of-type
et :last-of-type
.
Résumé des caractéristiques du sélecteur :first-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.
p
p
Ce deuxième exemple montre comment ne cibler que les premier et dernier éléments d'un type donné, ici les éléments div.
p
p
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é.
:first-of-type
:last-of-type
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
::empty
::first-child
::last-child
::nth-child()
::nth-last-child()
::only-child
::first-of-type
::last-of-type
::nth-of-type()
::nth-last-of-type()
::only-of-type
:
Pseudo-classe désignant l'élément racine.
Pseudo-classe désignant les éléments sans contenu.
Pseudo-classe désignant le premier enfant d'un élément.
Pseudo-classe désignant le dernier enfant d'un élément.
Pseudo-classe désignant un descendant d'après son numéro.
Pseudo-classe désignant un élément à partir de son numéro, en commençant par la fin.
Pseudo-classe désignant les éléments qui sont fils uniques de leur parent.
Pseudo-classe désignant les premiers éléments de chaque type.
Pseudo-classe désignant les derniers éléments de chaque type.
Pseudo-classe désignant un élément à partir de son numéro en ne comptant que les éléments du même 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.
Pseudo-classe désignant les éléments qui sont fils unique dans leur type.