: mål - CSS-tricks | CSS Almanak 2025

Den :targetpseudo vælgeren i CSS matcher, når hash i URL'en og id af et element er de samme. For eksempel, hvis den aktuelle URL er:

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

Og dette eksisterede i HTML:

 Content

Denne vælger matcher:

:target ( background: yellow; )

Og det sectionelement ville have en gul baggrund.

Med den generiske af en vælger (der matcher alt, hvad der tilfældigvis er målet), hvis URL'en blev ændret til at ende i, #faqog der var et andet element med et ID på faq, ville denne vælger matche igen, og #faqelementet ville have en gul baggrund.

Du kan begrænse det ved at være specifik for hvilke elementer, du vil målrette mod

#voters:target ( )

Hvornår vil du bruge dette?

En mulighed er, når du vil have stil med "stater". Når siden har en bestemt hash, er den i den tilstand. Det er ikke så alsidigt som at manipulere klassenavne (da der kun kan være et, og det kun kan relateres til et element), men det ligner det. Alt hvad du kan gøre ved at ændre en klasse for at ændre tilstand, kan du gøre, når elementet er i :target. For eksempel: skift farver, skift position, skift billeder, skjul / vis ting, hvad som helst.

Jeg bruger disse tommelfingerregler til hvornår :targeter et godt valg:

Når en ”stat” er nødvendig
Når jump-down / hash-link-opførsel er acceptabel
Når det er acceptabelt at påvirke browserhistorikken

Hvordan får du hashes i webadresser?

Den mest almindelige måde er, at en bruger klikker på et link, der inkluderer en hash. Kan være et internt (samme side) link eller en fuldt kvalificeret URL, der tilfældigvis ender med en hash og værdi. Eksempler:

Go To There Go To There

Jumping Behavior

Uanset om det er et link til samme side eller ej, er browserens adfærd at rulle siden, indtil elementet er øverst på siden . Eller så vidt det kan, hvis det ikke kan rulle så langt. Dette er ret vigtigt at vide, fordi det betyder at udnytte denne “erklærede” adfærd er lidt vanskelig / begrænset.

For eksempel prøvede jeg engang en række forskellige teknikker til at replikere funktionelle CSS-faner, men besluttede i sidste ende at bruge afkrydsningsfeltets hack var en bedre idé, fordi det undgår problemer med sidehopping. Ian Hansson hos CSS Science har også nogle eksempler på faner. Hans tredje eksempel bruger :targetog absolut placerede elementer skjult over toppen af siden for at forhindre sidehoppningsadfærd. Det er klogt, men en samlet perfekt løsning, fordi det ville betyde, at siden ville springe opad, hvis fanerne var nede længere på en side.

Mere information

Artikel her om CSS-tricks: Til: mål
Selectors niveau 4 spec
Et simpelt billedgalleri ved hjælp af: target (lider af sidehoppet, godt eksempel på det) af Chris Heilmann
Demo med gul fade-teknik (dog for eksisterende indhold, ikke nyligt tilføjet indhold) fra Web Designer Notebook.
Et CSS-mål, bogstaveligt talt, af Caleb Ogden.
CSS: mål for design uden for skærmen
MDN dokumenterer