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

Den :targetpseudo väljaren i CSS matchar när hash i URL och id av ett element är desamma. Till exempel om den aktuella webbadressen är:

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

Och detta fanns i HTML:

 Content

Den här väljaren skulle matcha:

:target ( background: yellow; )

Och det sectionelementet skulle ha en gul bakgrund.

Med den generiska av en väljare (som matchar allt som råkar vara målet), om webbadressen ändrades för att sluta i #faqoch det fanns ett annat element med ett ID på faq, skulle den väljaren matcha igen och #faqelementet skulle ha en gul bakgrund.

Du kan begränsa det genom att vara specifik om vilka element du vill rikta in dig på

#voters:target ( )

När skulle du använda det här?

En möjlighet är när du vill ha stil med "stater". När sidan har en viss hash är den i det tillståndet. Det är inte lika mångsidigt som att manipulera klassnamn (eftersom det bara kan finnas ett och det bara kan relateras till ett element) men det liknar det. Allt du kan göra för att ändra en klass för att ändra tillstånd kan du göra när elementet är i :target. Till exempel: ändra färger, ändra position, ändra bilder, dölja / visa saker, vad som helst.

Jag skulle använda dessa tumregler för när :targetär ett bra val:

När en ”stat” behövs
När hopp-ned / hash-länk beteende är acceptabelt
När det är acceptabelt att påverka webbläsarhistoriken

Hur får du hash i webbadresser?

Det vanligaste sättet är att en användare klickar på en länk som innehåller en hash. Kan vara en intern (samma sida) länk eller en fullständigt kvalificerad URL som råkar sluta med hash och värde. Exempel:

Go To There Go To There

Hoppningsbeteende

Oavsett om det är en länk på samma sida eller inte, är webbläsarens beteende bläddra på sidan tills det elementet är högst upp på sidan . Eller så långt det kan om den inte kan rulla så långt. Detta är ganska viktigt att veta, eftersom det innebär att utnyttja detta "uttalade" beteende är lite knepigt / begränsat.

Till exempel försökte jag en gång olika tekniker för att replikera funktionella CSS-flikar, men bestämde mig i slutändan med att använda kryssrutans hack var en bättre idé eftersom det undviker sidhoppningsproblemen. Ian Hansson på CSS Science har också några exempel på flikar. Hans tredje exempel använder :targetoch helt placerade element gömda överst på sidan för att förhindra sidhoppningsbeteende. Det är smart, men en övergripande perfekt lösning, för det skulle innebära att sidan skulle hoppa uppåt om flikarna var nere längre på en sida.

Mer information

Artikel här om CSS-tricks: På: mål
Väljare nivå 4 specifik
Ett enkelt bildgalleri som använder: target (lider av sidhoppet, bra exempel på det) av Chris Heilmann
Demo för gul blekningsteknik (men för befintligt innehåll, inte nyligen tillagt innehåll) från Web Designer Notebook.
Ett CSS-mål, bokstavligen, av Caleb Ogden.
CSS: mål för design utanför skärmen
MDN-dokument