CSS : Pseudo-classe :only-of-type

Le sélecteur :only-of-type correspond aux éléments qui sont les seuls enfants de leur type.

p:only-of-type correspond à un paragraphe uniquement s'il est le seul paragraphe à l'intérieur de son parent.

Les sélecteurs :only-of-type et :only-child présentent des similitudes, à la différence près que le sélecteur :only-child sélectionne l'élément si son parent n'a pas d'autres enfants de quelque type que ce soit.

Version

Selectors Level 3

Selectors Level 4

Syntaxe

Syntaxe CSS :only-of-type

css

:only-of-type {
  css declarations;
}

Exemple du sélecteur :only-of-type :

Exemple de code CSS :only-of-type

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:only-of-type {
        background: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:only-of-type selector example</h2>
    <div>
      <p>Lorem ipsum is simply dummy text.</p>
    </div>
    <div>
      <p>Lorem ipsum is simply dummy text.</p>
      <p>Lorem ipsum is simply dummy text.</p>
    </div>
  </body>
</html>

Try it Yourself »

Pratique

Que représente la pseudo-classe ':only-of-type' en CSS ?

La pseudo-classe ':only-of-type' représente un élément qui n'a pas de frères et sœurs du type spécifié dans son conteneur parent.La pseudo-classe ':only-of-type' représente un élément cible qui est le seul enfant de son type dans son parent.La pseudo-classe ':only-of-type' représente un élément possédant un ID ou une classe spécifique dans son conteneur parent.La pseudo-classe ':only-of-type' représente un élément stylisé qui est le seul enfant de son type dans son document.

CSS : Pseudo-classe :only-of-type ​

Version ​

Syntaxe ​

Exemple du sélecteur :only-of-type : ​

Pratique ​

CSS : Pseudo-classe :only-of-type

Version

Syntaxe

Exemple du sélecteur :only-of-type :

Pratique