Pseudo Classe CSS :only-child

La pseudo-sélecteur :only-child correspond à l'élément si c'est le seul enfant de son parent.

L'éléments n'est sélecté que si le parent n'a aucun autre élément de n'importe quel type.

Version

CSS3

Syntaxe

:only-child {
css declarations;
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      p:only-child {
      background: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Exemple du sélecteur :only-child</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

Que fait le sélecteur :only-child en CSS?
Trouvez-vous cela utile?