: any-link - Trucchi CSS

Anonim

La :any-linkpseudo-classe in CSS fornisce un metodo per selezionare gli elementi che sono l'ancora di origine di un collegamento ipertestuale.

Se l'ancora termine hai perso, che è un nome di fantasia per l' href attributo agli elementi HTML , e . (Il motivo per cui dovresti scegliere come target un o in CSS è al di là delle mie capacità, ma ehi.) Le specifiche HTML hanno molte più informazioni su questo.

Un elemento che accetta e contiene un hrefattributo è un collegamento ipertestuale e verrà selezionato con :any-link. Questo diventa un modo pratico per selezionare tutti gli elementi HTML basati su link che altrimenti potrebbero apparire non correlati e senza toccare il markup. Forse esiste perché potresti pensare :linkche selezionerebbe tutti i collegamenti, ma manca :visited, quindi questo li avvolge tutti insieme.

Funzionalmente, è proprio come il selettore di attributi (href).

Howdy!
:any-link ( color: red; font-weight: 900; text-decoration: none; )

Vale la pena notare che potremmo anche selezionare gli stessi elementi HTML usando la :matches()pseudo-classe. Ad esempio, :matches(:link, :visited)selezionerà gli stessi elementi di :any-link.

Un'altra cosa da notare è che le specifiche attualmente richiedono suggerimenti di nomi alternativi per questo selettore al momento della stesura di questo documento. Sebbene non sia chiaro se il nome cambierà, la :matches()pseudo-classe era precedentemente denominata, il :any()che potrebbe essere un'indicazione.

Supporto browser

Lo :any-linkpseudo-elemento è considerato una funzionalità sperimentale e fa parte della specifica Selectors Level 4, che è attualmente in stato di bozza di lavoro.

Per un supporto completo vorresti usarlo come prefisso:

:-webkit-any-link ( ) :-moz-any-link ( ) :any-link ( )

E ricorda di non separare i selettori da virgole per combinarli, poiché i browser lanciano selettori con parti che non comprendono.

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

Desktop

Cromo Firefox IE Bordo Safari
15 * 3 * No 79 6.1 *

Mobile / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4.4 * 6.0-6.1 *

Relazionato

  • :link
  • :matches()
  • :visited

Maggiori informazioni

  • Selettori Livello 4 Specifiche (bozza di lavoro)
  • Documentazione Mozilla