Il :link
selettore è una pseudo-classe che prende di mira tutti gli elementi anchor ( ) non visitati su una pagina.
a:link ( color: aquamarine; )
L'esempio sopra cambierà il colore di tutti i collegamenti non visitati in acquamarina.
Quando viene utilizzato in combinazione con la :hover
pseudo-classe, :link
deve apparire per primo, oppure non essere definito affatto, affinché gli :hover
stili funzionino. Questo perché sono ugualmente specifici, quindi se :link
venissero dopo, quegli stili sovrascriverebbero gli stili al passaggio del mouse.
La :link
pseudo-classe sceglierà come target tutti gli elementi che hanno un
href
attributo, anche se href
ha un valore vuoto. Quindi in quel senso è come il selettore di attributi (href)
.
Ciò significa che i seguenti tre elementi HTML possono essere tutti stilizzati tramite la :link
pseudo-classe:
CSS-Tricks CSS-Tricks CSS-Tricks
Il terzo esempio nel blocco di codice precedente, tuttavia, sarebbe HTML non valido.
Ci sono solo tre elementi HTML che accettano l' href
attributo: ,
, e
. Solo l'
elemento può essere stilizzato tramite la
:link
pseudo-classe.
Inoltre, non è possibile aggiungere l' href
attributo a un altro tipo di elemento e renderlo compatibile con lo stile tramite :link
. In altre parole, se avessi il seguente codice HTML:
CSS-Tricks
Il seguente CSS non avrebbe alcun effetto:
div:link ( color: aquamarine; )
Anche in questo caso, l'HTML fallirebbe la convalida, poiché href
non è un attributo valido per
.
Dato che :link
può indirizzare solo gli elementi, gli
:link
stili possono essere definiti nel CSS senza il selettore del tipo di elemento, in questo modo:
:link ( color: aquamarine; )
Inoltre, per tutti gli scopi pratici quando si utilizza HTML, la :link
pseudo-classe è in qualche modo irrilevante poiché lo stesso effetto può essere ottenuto semplicemente mirando direttamente a tutti gli elementi:
a ( color: aquamarine; )
Tuttavia, se sulla pagina sono presenti elementi che non hanno l'
href
attributo impostato (ad esempio, nelle pagine legacy che utilizzavano ), il codice precedente avrebbe come target anche quegli elementi e questo potrebbe non essere il risultato desiderato.
Va anche sottolineato che, a partire dai CSS2, altri linguaggi di documenti (oltre all'HTML) possono definire altri elementi, oltre agli ancoraggi, che possono essere stilizzati tramite la :link
pseudo-classe.
Supporto browser
Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
---|---|---|---|---|---|---|
Qualunque | Qualunque | Qualunque | Qualunque | Qualunque | Qualunque | Qualunque |