:only-child - Sélecteur CSS

Description de la pseudo-classe :only-child.

Le sélecteur pseudo-classe :only-child cible les éléments qui sont enfants uniques de leur parent.

Attention ! Dans tous les cas, les enfants uniques sont également ciblés par les pseudo-classes :first-child et :last-child, deux sélecteurs qui ont la même priorité que :only-child. Ce sera donc la dernière règle rencontrée qui sera appliquée.

Voyez aussi ces autres 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() : L'enfant d'un certain numéro d'ordre.
• :nth-last-child() : L'enfant d'un certain numéro d'ordre, en commençant le comptage par la fin.

Illustration des éléments ciblés par ces pseudo-classes dans le cas d'un tableau de une ligne et sept colonnes.
Dans tous les cas, les éléments ciblés par :only-child le sont également par :first-child et :last-child.
 

• :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-type désigne les éléments dont le parent n'a pas d'autres enfants du même type.

Exemple : les éléments ciblés par les pseudo-classes ...of-type
dans le cas d'un tableau comportant à la fois des cellules th et des cellules td.
 

Exemple avec la pseudo-classe :only-child.

L'exemple ci-dessous est un tableau dont le nombre de cellules est différent sur chacune des lignes. Il illustre le fonctionnement de la pseudo-classe :only-child : ce sélecteur ne cible que les cellules qui sont seules sur leur ligne (application d'un arrière-plan jaune).

Prise en charge par les navigateurs (compatibilité).

La pseudo-classe :only-child ne pose pas de problème de compatibilité avec les navigateurs actuels.

1

Pseudo-classe
:only-child

2

:only-child
sans parent

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 de sélection par rapport au DOM.

Depuis la sélection de la racine jusqu'à la sélection du Nième élément d'un nœud, les pseudo-classes ci-après sont toutes relatives à l'arbre du document (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.
:first-of-type
Pseudo-classe ciblant les premiers éléments de chaque type, 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-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).