Pseudo Classe CSS :only-of-type

Le sélecteur :only-of-type correspond aux éléments qui sont le seul enfant de ce type.

:only-of-type correspond à une paragraphe seulement si c'est la seule paragraphe à l'intérieur de son parent.

Les sélecteurs :only-of-type et :only-child ont les similarités, sauf ce que le sélecteur :only-child sélectionne l'élément si son parent n'a d'autre enfants de n'importe quel type.

Version

CSS3

Syntaxe

:only-of-type {
css declarations;
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      p:only-of-type {
      background: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur :only-of-type</h2>
    <div>
      <p>Lorem ipsum est simplement du faux texte.</p>
    </div>
    <div>
      <p>Lorem ipsum est simplement du faux texte.</p>
      <p>Lorem ipsum est simplement du faux texte.</p>
    </div>
  </body>
</html>

Support de Navigateurs

chrome edge firefox safari opera
4.0+ 12.0+ 3.5+ 3.2+ 10.0+

Pratiquez vos connaissances

Qu'est-ce que le sélecteur :only-of-type en CSS?
Trouvez-vous cela utile?