CSS :only-of-type Pseudo Classe - Learn CSS

La pseudo-classe CSS :only-of-type corrisponde a un elemento che è l'unico del suo tipo tra i figli del suo genitore. Per "tipo" si intende il nome del tag (ad esempio p, img o h2), non una classe o un ID.

Quindi p:only-of-type corrisponde a un <p> solo se è l'unico paragrafo all'interno del suo genitore — anche se quel genitore contiene altri elementi come intestazioni, liste o immagini.

Questa pagina spiega come funziona :only-of-type, come si differenzia da :only-child e quando ciascuno è lo strumento giusto.

Quando usarlo

:only-of-type è utile quando si desidera stilizzare un elemento solo quando è isolato all'interno del suo gruppo di fratelli dello stesso tipo. Casi comuni:

Evidenziare un paragrafo in una card solo quando è l'unico paragrafo presente.
Aggiungere spaziatura extra a una lista quando è l'unica lista in una sezione.
Stilizzare un'immagine singola diversamente dalle immagini che appaiono in una galleria (più immagini).

Se il genitore acquisisce un secondo elemento dello stesso tipo, la regola smette di applicarsi automaticamente — senza bisogno di JavaScript o classi aggiuntive.

`:only-of-type` vs `:only-child`

Queste due pseudo-classi sembrano simili ma rispondono a domande diverse:

:only-child corrisponde a un elemento solo se non ha fratelli di alcun tipo (è l'unico figlio del genitore di qualsiasi tipo).
:only-of-type corrisponde a un elemento se non ha fratelli dello stesso tipo — i fratelli di altri tipi sono consentiti.

Considera questo markup:

<div>
  <h2>Heading</h2>
  <p>Only paragraph.</p>
</div>

Qui il <p> non è un :only-child (l'<h2> è un fratello), ma è il :only-of-type di tipo p, quindi p:only-of-type lo seleziona.

Versione

Selectors Level 3

Selectors Level 4

Sintassi

Sintassi CSS :only-of-type

:only-of-type {
  css declarations;
}

Esempio del selettore :only-of-type:

Esempio di codice CSS :only-of-type

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:only-of-type {
        background: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:only-of-type selector example</h2>
    <div>
      <p>Lorem ipsum is simply dummy text.</p>
    </div>
    <div>
      <p>Lorem ipsum is simply dummy text.</p>
      <p>Lorem ipsum is simply dummy text.</p>
    </div>
  </body>
</html>

Provalo tu stesso »

Nell'esempio precedente, il primo <div> contiene un singolo paragrafo, quindi quel paragrafo riceve lo sfondo blu. Il secondo <div> contiene due paragrafi, quindi nessuno corrisponde a p:only-of-type e rimangono senza stile.

Mescolare tipi nello stesso genitore

Poiché :only-of-type conta solo i fratelli dello stesso tipo, un genitore può avere più elementi di tipi diversi e ogni tipo "unico" corrisponde comunque:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div :only-of-type {
        color: #1c87c9;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>The only heading</h2>
      <p>The only paragraph.</p>
      <span>The only span.</span>
    </div>
  </body>
</html>

Qui <h2>, <p> e <span> sono ciascuno l'unico elemento del loro tipo all'interno del <div>, quindi tutti e tre vengono stilizzati.

Supporto dei browser

:only-of-type è supportato in tutti i browser moderni — Chrome, Firefox, Safari, Edge e Opera. Fa parte di Selectors Level 3, quindi puoi usarlo senza fallback nei browser attuali.

Selettori correlati

:only-child — corrisponde a un elemento senza fratelli di alcun tipo.
:first-of-type — il primo elemento del suo tipo tra i fratelli.
:last-of-type — l'ultimo elemento del suo tipo tra i fratelli.
:nth-of-type — seleziona elementi di un tipo per posizione.

Pratica

Cosa rappresenta la pseudo-classe ':only-of-type' in CSS?

':only-of-type' rappresenta un elemento che non ha fratelli del tipo specificato all'interno del suo contenitore genitore.':only-of-type' rappresenta un elemento target che è l'unico figlio del suo tipo all'interno del suo genitore.':only-of-type' rappresenta un elemento con un certo ID o classe all'interno del suo contenitore genitore.':only-of-type' rappresenta un elemento stilizzato che è l'unico figlio del suo tipo all'interno del suo documento.