Il :only-of-typeselettore di pseudo-classe in CSS rappresenta qualsiasi elemento che non ha fratelli del tipo dato.
p:only-of-type ( color: red; )Se nessun tag precede il selettore, corrisponderà a qualsiasi tag (ad esempio :only-of-type). Se un altro selettore lo precede, corrisponderà in base al tipo di tag che il selettore corrisponde. Ad esempio .example:only-of-typesi comporterà come p:only-of-typese .examplefosse applicato a un elemento di paragrafo.
Semplice esempio
Un elenco contiene solo un singolo elemento dell'elenco. Un altro elenco contiene tre voci di elenco. Possiamo indirizzare l'elemento dell'elenco che è solo con :only-of-type.
Anche se forse questo non è il miglior esempio, perché :only-childfunzionerebbe altrettanto bene poiché gli elementi della lista sono gli unici possibili figli delle liste. Se invece usiamo div, potremmo indirizzare un paragrafo all'interno di un div se è l'unico paragrafo, nonostante ci siano anche altri elementi.
Da notare
A parte il divertimento, potresti ottenere la stessa selezione :only-of-typedi :first-of-type:last-of-typeo :nth-of-type(1):nth-last-of-type(1). Quelli usano però due selettori concatenati, il che significa che la specificità è doppia rispetto a :only-of-type.
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Qualunque | Qualunque | Qualunque | Qualunque | IE9 + | Qualunque | Qualunque |