: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)
 🡇  
 🡅  
Statut du document: WD (document de travail)
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.

Pseudo-classe :only-of-type
Les éléments ciblés par la pseudo-classes :only-of-type dans le cas d'un tableau de une ligne et sept colonnes.
Notez que les éléments ciblés par :only-of-type le sont également par :first-of-type et :last-of-type.

Autres pseudo-classes relatives à l'ordre dans le document source.

Toutes ces pseudo-classes permettent également de cibler des éléments en fonction de leur position dans l'arbre du document :

Pseudo-classe ciblant le premier enfant d'un élément dans l'ordre du document.
Pseudo-classe ciblant le dernier enfant d'un élément, dans l'ordre du document.
Pseudo-classe ciblant un descendant d'après son numéro dans l'ordre du document.
Pseudo-classe ciblant un élément à partir de son numéro, en commençant par la fin, et dans l'ordre du document.
Pseudo-classe ciblant les éléments qui sont fils uniques de leur parent.
Pseudo-classe ciblant les premiers éléments de chaque type, dans l'ordre du document.
Pseudo-classe ciblant les derniers éléments de chaque type, dans l'ordre du document.
Pseudo-classe ciblant un élément à partir de son numéro en ne comptant que les éléments du même 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.
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.

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.

Prise en charge par les navigateurs (compatibilité).

Pas de problème de compatibilité à signaler au sujet de la pseudo-classe :only-of-type.

Colonne 1
Prise en charge par les navigateurs de la pseudo-classe :only-of-type qui cible les enfants unique dans un type donné.

Remarques :

(1) Internet Explorer traite tous les éléments de type inconnu, donc les éléments personnalisés, dans un même type.

1
Pseudo-classe
:only-of-type
Estimation de la prise en charge globale.
97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Samsung Internet

Opéra

Safari sur IOS

Firefox

Firefox pour Androïd

Edge

Chrome

Androïd Brower

KaiOS Browser

Chrome pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

Historique de la pseudo-classe :only-of-type.

  • Sélecteurs - Niveau 3

    Concernant :only-of-type. Présentation de la pseudo-classe :only-of-type dans ce niveau 3 de la spécification sur les sélecteurs.
    WD
    03 Août 1999
    Document de travail.
    CR
    13 Novembre 2001
    Candidat à la recommandation.
    PR
    15 Décembre 2009
    Proposé à la recommandation.
    REC
    29 Septembre 2011
    Recommandation.

  • Sélecteurs - Niveau 4

    Concernant :only-of-type. Pas de changement concernant :only-of-type.
    WD
    29 Septembre 2011
    Document de travail.
    CR
    PR
    REC

Voir aussi : pseudo-classes de sélection en fonction du DOM.

De nombreuses pseudo-classes permettent de désigner les éléments en fonction de leur position dans l'arbre du document (DOM). En voici la liste.

: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-child
Pseudo-classe ciblant les éléments qui sont fils uniques de leur parent.
: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).