Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

: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.

Syntaxe

:only-child { style properties }

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 Aucune modification.
Selectors Level 3
La définition de ':only-child' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 2.0 1.5 (1.8) 9.0 9.5 3.1
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple 2.1 1.0 (1.8) 9 10.0 3.1

Étiquettes et contributeurs liés au document

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