La pseudo-classe :only-of-type CSS permet de cibler un élément qui ne possède aucun nœud frère du même type pour un même élément parent (par exemple, sélectionner le seul élément <em> d'un <dd>).

/* Cible un élément <p> si celui-ci est le */
/* seul paragraphe de son élément parent   */
p:only-of-type {
  background-color: lime;
}
Note : Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).

 

Syntaxe

:only-of-type

Exemples

CSS

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

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

HTML

<ol>
  <li>Premier
    <ul>
      <li>Ceci est l'unique li</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>
<ol>
  <li>Une seule liste imbriquée
    <ul>Avec
      <li>Un seul item</li>
    </ul>
  </li>
</ol>

Résultat

Spécifications

Spécification État Commentaires
Selectors Level 4
La définition de ':only-of-type' dans cette spécification.
Version de travail L'élément ciblé ne doit pas nécessairement avoir un élément parent.
Selectors Level 3
La définition de ':only-of-type' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1 Oui3.599.53.2
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple2.1 ? Oui4103.2 ?

Voir aussi

Étiquettes et contributeurs liés au document

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