: enfant unique - Astuces CSS | CSS Almanach 2025

La :only-childpropriété de sélecteur de pseudo-classe en CSS représente un élément qui a un élément parent et dont l'élément parent n'a aucun autre élément enfant. Ce serait la même chose que :first-child:last-childou :nth-child(1):nth-last-child(1), mais avec une spécificité moindre.

div p:only-child ( color: red; )

Par exemple, si nous imbriquons des paragraphes dans un élément similaire…


This paragraph is the only child of its parent
This paragraph is the first child of its parent
This paragraph is the second child of its parent

Maintenant, nous pouvons styliser le seul

de notre premier enfant . Les enfants suivants et ses enfants ne seront jamais stylisés car le conteneur parent contient plus d'un enfant (c'est-à-dire les balises p).

p:only-child ( color:red; )

Nous pourrions également mélanger des pseudo-classes supplémentaires comme cet exemple qui sélectionne le premier paragraphe dans notre div imbriqué et le seul enfant de div.contain.


Hello World
some more children

div.contain div:only-child :first-child ( color: red; )

:only-childne fonctionnera pas comme un sélecteur si votre élément parent contient plus d'un enfant avec une balise identique. Par exemple…


paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2

div.contain div:only-child ( color: red; )

Il en résultera qu'aucun div hérite de la couleur rouge car le parent contient plus d'un enfant (les 3 divs sans nom).

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.