--- title: ':only-child' slug: 'Web/CSS/:only-child' tags: - CSS - Pseudo-classe - Reference translation_of: 'Web/CSS/:only-child' ---
{{CSSRef}}

La pseudo-classe :only-child représente n'importe quel élément qui est le seul enfant de son élément parent. Elle permet d'obtenir le même effet que :first-child:last-child ou :nth-child(1):nth-last-child(1), mais avec une spécificité inférieure.

/* Cible chaque élément <p> si celui-ci   */
/* est le seul élément fils de son parent */
p:only-child {
  background-color: lime;
}

Note : En CSS3, pour cibler l'élément, il fallait que celui-ci ait un élément parent. Cette restriction a été levée avec CSS4.

Syntaxe

{{csssyntax}}

Exemples

Exemple simple

CSS

span:only-child {
  color:red;
}

HTML

<div>
  <span>
    Ce span est l'unique enfant
    de son parent
  </span>
</div>

<div>
  <span>
    Ce span est l'un des deux
    enfants de son parent
  </span>
  <span>
    Ce span est l'un des deux
    enfants de son parent
  </span>
</div>

Résultat

{{EmbedLiveSample('Exemple_simple', '100%', 150)}}

Exemple avec une liste

CSS

li li {
  list-style-type : disc;
}

li:only-child {
  color: #6699ff;
  font-style: italic;
  list-style-type: square;
}

HTML

<ol>
  <li>Premier
    <ul>
      <li>Ceci est l'unique élément enfant</li>
    </ul>
  </li>
  <li>Deuxième
    <ul>
      <li>Cette liste a deux éléments</li>
      <li>Cette liste a deux éléments</li>
    </ul>
  </li>
  <li>Troisième
    <ul>
      <li>Cette liste a trois éléments</li>
      <li>Cette liste a trois éléments</li>
      <li>Cette liste a trois éléments</li>
    </ul>
  </li>
</ol>

Résultat

{{EmbedLiveSample('Exemple_avec_une_liste', '100%', 150)}}

Spécifications

Spécification État Commentaires
{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}} {{Spec2('CSS4 Selectors')}} Il n'est plus nécessaire qu'un élément ait un parent pour être ciblé.
{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}} {{Spec2('CSS3 Selectors')}} Définition initiale.

Compatibilité des navigateurs

{{Compat("css.selectors.only-child")}}

Voir aussi