: target - Trucchi CSS | CSS Almanac 2025

Lo :targetpseudo selettore in CSS corrisponde quando l'hash nell'URL e l'id di un elemento sono gli stessi. Ad esempio, se l'URL corrente è:

https://css-tricks.com/#voters

E questo esisteva nell'HTML:

 Content

Questo selettore corrisponderebbe a:

:target ( background: yellow; )

E sectionquell'elemento avrebbe uno sfondo giallo.

Con quel generico di un selettore (che corrisponde a tutto ciò che sembra essere il target), se l'URL è cambiato per finire in #faqe c'era un altro elemento con un ID di faq, quel selettore corrisponderebbe di nuovo e l' #faqelemento avrebbe uno sfondo giallo.

Potresti limitarlo specificando quali elementi vuoi scegliere come target, come

#voters:target ( )

Quando lo useresti?

Una possibilità è quando vuoi uno stile con "stati". Quando la pagina ha un certo hash, è in quello stato. Non è così versatile come manipolare i nomi delle classi (poiché ce ne può essere solo uno e può essere correlato solo a un elemento) ma è simile. Tutto ciò che potresti fare cambiando una classe per cambiare stato lo potresti fare quando l'elemento è in :target. Ad esempio: cambia i colori, cambia posizione, cambia immagini, nascondi / mostra cose, qualunque cosa.

Userei queste regole pratiche per quando :targetè una buona scelta:

Quando è necessario uno "stato"
Quando il comportamento jump-down / hash-link è accettabile
Quando è accettabile influire sulla cronologia del browser

Come si ottengono gli hash negli URL?

Il modo più comune è fare clic su un collegamento che include un hash da parte di un utente. Potrebbe essere un collegamento interno (nella stessa pagina) o un URL completo che finisce con un hash e un valore. Esempi:

Go To There Go To There

Comportamento di salto

Indipendentemente dal fatto che si tratti di un collegamento alla stessa pagina o meno, il comportamento del browser è lo scorrimento della pagina fino a quando quell'elemento si trova nella parte superiore della pagina . O, per quanto possibile, se non riesce a scorrere così lontano. Questo è piuttosto importante da sapere, perché significa che sfruttare questo comportamento "dichiarato" è un po 'complicato / limitato.

Ad esempio, una volta ho provato una varietà di tecniche per replicare le schede CSS funzionali, ma alla fine ho deciso che utilizzare l'hack della casella di controllo era un'idea migliore perché evita i problemi di salto di pagina. Ian Hansson di CSS Science ha anche alcuni esempi di schede. Il suo terzo esempio utilizza :targetelementi e posizionati in modo assoluto nascosti sopra la parte superiore della pagina per impedire il comportamento del salto di pagina. È intelligente, ma una soluzione complessivamente perfetta, perché ciò significherebbe che la pagina salterebbe verso l'alto se le schede si trovassero più in basso su una pagina.

Maggiori informazioni

Articolo qui su CSS-Tricks: On: target
Selettori Livello 4 spec
Una semplice galleria di immagini che usa: target (soffre della cosa del salto di pagina, un buon esempio di questo) di Chris Heilmann
Demo della tecnica di dissolvenza del giallo (anche se per contenuto esistente, non per contenuto appena aggiunto) da Web Designer Notebook.
Un CSS Target, letteralmente, di Caleb Ogden.
CSS: target per progetti fuori schermo
Documenti MDN