W3docs
fr
Se connecter

CSS :only-child Pseudo Classe

Utilisez la pseudo-classe CSS :only-child pour sélectionner et styliser l'unique enfant d'un parent. Exemples et explications pratiques.

La pseudo-classe :only-child correspond à un élément qui est le seul enfant de son parent — c'est-à-dire un élément sans aucun frère ni sœur.

L'élément est sélectionné uniquement si son parent ne contient aucun autre élément enfant. La pseudo-classe :only-child est fonctionnellement équivalente à :first-child:last-child (être à la fois le premier et le dernier enfant signifie qu'il n'y a rien d'autre entre les deux), et elle porte la même spécificité de (0,2,0), car elle compte comme deux pseudo-classes.

Cette page explique ce que :only-child sélectionne, en quoi il diffère des sélecteurs apparentés comme :only-of-type, comment l'utiliser dans des mises en page réelles, et les pièges courants à éviter.

Quand utiliser :only-child

:only-child est particulièrement utile lorsque vous souhaitez qu'un élément ait un aspect différent selon qu'il se trouve seul ou parmi des frères et sœurs. Cas d'usage courants :

  • Listes avec un seul élément. Stylisez différemment une liste d'un seul élément (par exemple, masquez une puce ou supprimez un séparateur qui n'a de sens qu'avec plusieurs éléments).
  • Mises en page en cartes ou en grilles. Une carte isolée peut être centrée ou étirée, tandis que deux cartes ou plus basculent vers une disposition multi-colonnes.
  • Contenu généré. Lorsque le balisage est produit par un CMS ou une boucle de gabarit, il est souvent impossible de savoir à l'avance combien de frères et sœurs apparaîtront ; :only-child permet à la feuille de style de réagir automatiquement.

Différence avec :only-of-type

C'est le point de confusion le plus courant :

  • :only-child — correspond uniquement lorsque l'élément est le seul enfant de son parent, quel que soit le type d'élément. Si un autre élément frère ou sœur existe, il ne correspond pas.
  • :only-of-type — correspond lorsque l'élément est le seul de son type parmi ses frères et sœurs, même si des frères et sœurs d'autres types existent.
<div>
  <h2>Heading</h2>
  <p>Only paragraph here</p>
</div>

Dans le balisage ci-dessus, le <p> n'est pas un :only-child (le <h2> est également un enfant), mais il est :only-of-type, car c'est le seul <p>.

Le contenu textuel ne compte pas

:only-child ne prend en compte que les frères et sœurs éléments. Le texte brut autour d'un élément ne l'empêche pas de correspondre :

<p>Some text <strong>bold</strong> more text</p>

Ici, <strong> correspond quand même à strong:only-child, car les nœuds texte environnants ne sont pas des éléments. Les espaces blancs et les commentaires sont également ignorés.

Version

Selectors Level 4

Selectors Level 3

Syntaxe

Syntaxe CSS :only-child

:only-child {
  css declarations;
}

Exemple du sélecteur :only-child :

Exemple :only-child

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

Exemple du sélecteur :only-child pour la balise <li> :

Exemple :only-child avec la balise li

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul li {
        list-style-type: square;
      }
      li:only-child {
        color: blue;
        list-style-type: disc;
      }
    </style>
  </head>
  <body>
    <h2>:only-child selector example</h2>
    <ol>
      <li>
        One element
        <ul>
          <li>This list has just one element.</li>
        </ul>
      </li>
      <li>
        Two elements
        <ul>
          <li>This list has two elements.</li>
          <li>This list has two elements.</li>
        </ul>
      </li>
      <li>
        Three elements
        <ul>
          <li>This list has three elements.</li>
          <li>This list has three elements.</li>
          <li>This list has three elements.</li>
        </ul>
      </li>
    </ol>
  </body>
</html>
Essayez vous-même »

Exemple du sélecteur :only-child pour la balise <em> :

Exemple :only-child avec la balise em

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      em:only-child {
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:only-child selector example</h2>
    <p>This is a <em>paragraph</em>.</p>
    <p>This is a paragraph.</p>
  </body>
</html>
Essayez vous-même »

Exemple du sélecteur :only-child pour la balise <div> :

Exemple :only-child pour la balise div

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div:only-child {
        color: #8ebf42;
        font-weight: bold;
      }
      div {
        display: block;
        margin: 6px;
        padding: 5px;
        outline: 1px solid #1c87c9;
      }
      div div {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h2>:only-child selector example</h2>
    <div>
      <div>I am an only child.</div>
    </div>
    <div>
      <div>I am the 1st sibling.</div>
      <div>I am the 2nd sibling.</div>
      <div>
        I am the 3rd sibling,
        <div>but this is an only child.</div>
      </div>
    </div>
  </body>
</html>
Essayez vous-même »

Sélecteurs associés

  • :only-of-type — le seul élément de son type parmi ses frères et sœurs.
  • :first-child et :last-child — ciblent le premier ou le dernier enfant ; :only-child est équivalent à la combinaison des deux.
  • :nth-child() — correspond aux enfants par position à l'aide d'une formule.

Pratique

Pratique
La pseudo-classe :only-child sélectionne un élément
La pseudo-classe :only-child sélectionne un élément
Was this page helpful?