:only-child

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

css
/* 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

Error: could not find syntax for this item

Exemples

Exemple simple

CSS

css
span:only-child {
  color: red;
}

HTML

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

Exemple avec une liste

CSS

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

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

HTML

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

Spécifications

Specification
Selectors Level 4
# only-child-pseudo

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi