Les pseudo-classes :first-child et :last-child.
Résumé des caractéristiques du sélecteur :first-child
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.
Voyez aussi ces autres pseudo-classes, qui permettent également de cibler des éléments en fonction de leur position dans l'arbre du document :
:nth-child(): les enfants qui sont en une position donnée parmi les enfants du parent.:nth-last-child(): les enfants qui sont en positionnen 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 ces différentes pseudo-classes dans le cas d'un tableau
comportant sept colonnes et une ligne unique.
:first-of-type: les éléments qui sont les premiers dans le même type qu'eux.:last-of-type: les éléments qui sont les derniers dans le même type qu'eux.: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-typedésigne les éléments dont le parent n'a pas d'autres enfants du même type.
Les éléments ciblés par les pseudo-classes ...of-type
dans l'exemple d'un tableau comportant deux cellules th et cinq cellules td.
Exemple avec les pseudo-classes :first-child et :last-child.
Exemple 1 - Tous les enfants sont du même type.
Dans l'exemple ci-dessous, le premier et le dernier éléments ont été distingués par une bordure colorée.
Exemple 2 - Enfants de types différents.
Ce deuxième exemple est plus complexe : les descendants du bloc #exemple2 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 est bien du type 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
p
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.
:first-child:first-child Éléments sans parent:last-child:last-child Éléments sans parentNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Oméra mini
Voir aussi : pseudo-classes relatives au DOM.
De nombreuses 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.
: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.