`:only-of-type` - Sélecteur CSS

:only-of-type

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

Description rapide

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.

Statut

Standard

Module W3C

Sélecteurs

Références (W3C)

🡇

🡅

Selectors Level 4

Statut du document: WD (document de travail)

Selectors Level 3

Statut du document: REC (recommandation)

Description de la pseudo-classe `:only-of-type`.

Le sélecteur pseudo-classe :only-of-type cible les éléments qui sont enfants uniques de leur parent dans un type particulier. Par exemple, si un élément div contient un seul paragraphe, il sera ciblé par :only-of-type même s'il côtoie des éléments d'un autre type comme des titres h..., d'autres div, etc.

Les éléments ciblés par :only-of-type le sont également par :first-of-type et :last-of-type. Ces sélecteurs ayant tous la même priorité, ce sera la dernière règle rencontrée qui sera prise en compte.

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, suivant l'ordre d'apparition dans le code du document.
:last-child : le dernier enfant du parent, dans l'ordre d'apparition dans le code du document.
: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.
:only-child : Les enfants uniques : ceux 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 de une ligne et sept colonnes.
Notez que 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, et dans le même type qu'eux.
:last-of-type : les éléments qui sont les derniers, et dans le même type qu'eux.
:nth-of-type() : les éléments qui sont à une position donnée parmi les éléments du même type.
:nth-last-of-type() : les éléments qui sont à une position donnée parmi les éléments du même type, en commençant le comptage par la fin.

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

Exemple 1.

Le cadre ci-dessous (id="exemple1") comporte deux paragraphes. L'utilisation du sélecteur :only-of-type permet d'entourer d'un contour rouge les éléments qui ne figurent qu'une seule fois dans chacun des paragraphes.

Ce paragraphe comporte plusieurs mots en gras, délimités par des balises b, et également un lien qui est le seul élément du type a.

A l'inverse, ce paragraphe comporte un seul élément délimité par une balise b et plusieurs liens délimités chacun par une balise a : lien 1, lien 2. Le même code CSS est appliqué aux deux paragraphes.

Exemple 2.

Ce deuxième exemple est surtout intéressant pour visualiser les conflits qui peuvent se produire avec d'autres sélecteurs tels que :first-of-type et :last-of-type. Toutes ces pseudo-classes ayant la même priorité, c'est la dernière règle rencontrée qui est appliquée.
Dans la plupart des cas, le plus logique est de citer :only-of-type en dernier.

Dans l'exemple ci-dessous, le lien est à la fois le premier enfant dans son type, le dernier, et l'enfant unique dans son type. Il est donc ciblé par les trois sélecteurs :first-of-type, :last-of-type et :only-of-type.

Ce paragraphe contient plusieurs mots en gras : mot 1, mot 2, mot 3, mot 4, et un seul lien.