:only-child

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

:only-child

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

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

Spécifications

Spécification État Commentaires
Selectors Level 4
La définition de ':only-child' dans cette spécification.
Version de travail Il n'est plus nécessaire qu'un élément ait un parent pour être ciblé.
Selectors Level 3
La définition de ':only-child' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
:only-childChrome Support complet 2Edge Support complet 12Firefox Support complet 1.5IE Support complet 9Opera Support complet 9.5Safari Support complet 3.1WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 3.1Samsung Internet Android Support complet Oui
Matches elements with no parentChrome Support complet 57Edge Aucun support NonFirefox Support complet 52IE Aucun support NonOpera Support complet 44Safari Aucun support NonWebView Android Support complet 57Chrome Android Support complet 57Firefox Android Support complet 52Opera Android Support complet 43Safari iOS Aucun support NonSamsung Internet Android Support complet 7.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support

Voir aussi