:only-of-type

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

Error: could not find syntax for this item

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

Specification
Selectors Level 4
# only-of-type-pseudo

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi