: mål - CSS-triks | CSS-almanakk 2025

Den :targetpseudo velgeren i CSS matcher når hash i URL og id av et element er de samme. For eksempel hvis den nåværende nettadressen er:

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

Og dette eksisterte i HTML:

 Content

Denne velgeren samsvarer med:

:target ( background: yellow; )

Og det sectionelementet ville ha en gul bakgrunn.

Med den generiske delen av en velger (som samsvarer med alt som tilfeldigvis er målet), hvis nettadressen endret seg til å ende i #faqog det var et annet element med en ID på faq, ville velgeren matche igjen og #faqelementet ville ha en gul bakgrunn.

Du kan begrense det ved å være spesifikk om hvilke elementer du vil målrette mot, som

#voters:target ( )

Når vil du bruke dette?

En mulighet er når du vil ha stil med "stater". Når siden har en viss hash, er den i den tilstanden. Det er ikke så allsidig som å manipulere klassenavn (siden det bare kan være ett og det kan bare være relatert til ett element), men det er likt. Alt du kan gjøre for å endre klasse for å endre tilstand, kan du gjøre når elementet er i :target. For eksempel: endre farger, endre posisjon, endre bilder, skjule / vise ting, hva som helst.

Jeg bruker disse tommelfingerreglene for når :targeter et godt valg:

Når det er behov for en “stat”
Når oppføringen til å hoppe ned / hasjlenke er akseptabel
Når det er akseptabelt å påvirke nettleserloggen

Hvordan får du hashes i URL-er?

Den vanligste måten er at en bruker klikker på en lenke som inkluderer en hash. Det kan være en intern lenke (samme side) eller en fullstendig kvalifisert URL som tilfeldigvis ender med hash og verdi. Eksempler:

Go To There Go To There

Jumping Behavior

Uansett om det er en kobling på samme side eller ikke, er nettleserens atferd bla siden til elementet er øverst på siden . Eller så langt det kan hvis den ikke kan bla så langt. Dette er ganske viktig å vite, fordi det betyr at det å utnytte denne "uttalte" oppførselen er litt vanskelig / begrenset.

For eksempel har jeg en gang prøvd en rekke teknikker for å replikere funksjonelle CSS-faner, men til slutt bestemte jeg meg for å bruke avkrysningsruten, fordi det var en bedre ide fordi det unngår sidehoppproblemer. Ian Hansson ved CSS Science har også noen eksempler på faner. Hans tredje eksempel bruker :targetog absolutt plasserte elementer skjult over toppen av siden for å forhindre sidehoppadferd. Det er smart, men en total perfekt løsning, fordi det vil bety at siden vil hoppe oppover hvis fanene er nede lenger på en side.

Mer informasjon

Artikkel her om CSS-triks: På: mål
Selectors nivå 4 spesifikasjon
Et enkelt bildegalleri ved hjelp av: target (lider av sidehopp-tingen, godt eksempel på det) av Chris Heilmann
Demo med gul fade-teknikk (men for eksisterende innhold, ikke nylig lagt til innhold) fra Web Designer Notebook.
Et CSS-mål, bokstavelig talt, av Caleb Ogden.
CSS: mål for design utenfor skjermen
MDN-dokumenter