:only-of-type

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

La pseudo-classe CSS :only-of-type permet de cibler un élément qui ne possède aucun nœud frère du même type.

Exemple interactif

a:only-of-type {
  color: fuchsia;
}

dd:only-of-type {
  background-color: bisque;
}

<p>
  Pour en savoir plus sur <b>QUIC</b>, consultez les <a href="#">RFC 9000</a> et
  <a href="#">RFC 9114</a>.
</p>

<dl>
  <dt>Publication</dt>
  <dd>2021</dd>
  <dd>2022</dd>
</dl>

<p>
  Les détails concernant <b>QPACK</b> se trouvent dans <a href="#">RFC 9204</a>.
</p>

<dl>
  <dt>Publication</dt>
  <dd>2022</dd>
</dl>

Syntaxe

css

:only-of-type {
  /* ... */
}

Exemples

Mettre en forme des éléments sans voisins du même type

HTML

html

<main>
  <div>Je suis l'élément `div` n°1.</div>
  <p>Je suis le seul élément `p` parmi mes voisins.</p>
  <div>Je suis l'élément `div` n°2.</div>
  <div>
    Je suis l'élément `div` n°3.
    <i>Je suis le seul enfant `i`.</i>
    <em>Je suis l'élément `em` n°1.</em>
    <em>Je suis l'élément `em` n°2.</em>
  </div>
</main>