MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple 2 (Oui) 1.5 (1.8) 9 9.5 3.1
Élément parent non nécessaire 57 ? ? ? 44 ?
Fonctionnalité Webview Android Chrome pour Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple (Oui) (Oui) (Oui) 1.0 (1.8) 9 10 3.1
Élément parent non nécessaire 57 57 ? ? ? 44 ?

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, tregagnon, Fredchat, louuis, teoli, FredB
 Dernière mise à jour par : SphinxKnight,