: doel - CSS-trucs | CSS Almanac 2025

De :targetpseudo-selector in CSS komt overeen als de hash in de URL en de id van een element hetzelfde zijn. Als de huidige URL bijvoorbeeld is:

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

En dit bestond in de HTML:

 Content

Deze selector zou overeenkomen met:

:target ( background: yellow; )

En dat sectionelement zou een gele achtergrond hebben.

Met die generiek van een selector (overeenkomend met alles wat toevallig het doelwit is), als de URL zou veranderen en zou eindigen op #faqen er was een ander element met een ID van faq, zou die selector weer overeenkomen en zou het #faqelement een gele achtergrond hebben.

Je zou het kunnen beperken door specifiek te zijn over welke elementen je wilt targeten, zoals

#voters:target ( )

Wanneer zou je dit gebruiken?

Een mogelijkheid is wanneer je stijl wilt met 'staten'. Als de pagina een bepaalde hash heeft, bevindt deze zich in die staat. Het is niet zo veelzijdig als het manipuleren van klassenamen (aangezien er maar één kan zijn en het kan maar aan één element gerelateerd zijn), maar het is vergelijkbaar. Alles wat je zou kunnen doen om een klasse te veranderen om van status te veranderen, zou je kunnen doen als het element zich in :target. Bijvoorbeeld: verander kleuren, verander positie, verander afbeeldingen, verberg / toon dingen, wat dan ook.

Ik zou deze vuistregels gebruiken voor wanneer :targeteen goede keuze is:

Wanneer een "staat" nodig is
Wanneer het jump-down / hash-link-gedrag acceptabel is
Wanneer het acceptabel is om de browsergeschiedenis te beïnvloeden

Hoe krijg je hashes in URL's?

De meest gebruikelijke manier is door een gebruiker op een link te klikken die een hash bevat. Dit kan een interne link (dezelfde pagina) zijn of een volledig gekwalificeerde URL die eindigt met een hash en waarde. Voorbeelden:

Go To There Go To There

Springgedrag

Ongeacht of het een link naar dezelfde pagina is of niet, het browsergedrag is het scrollen door de pagina totdat dat element bovenaan de pagina staat . Of, voor zover het kan, als het niet zo ver kan scrollen. Dit is nogal belangrijk om te weten, omdat het betekent dat het exploiteren van dit "verklaarde" gedrag een beetje lastig / beperkt is.

Ik heb bijvoorbeeld ooit een verscheidenheid aan technieken geprobeerd om functionele CSS-tabbladen te repliceren, maar uiteindelijk besloot ik dat het gebruik van de checkbox-hack een beter idee was omdat het problemen met het springen van pagina's vermijdt. Ian Hansson van CSS Science heeft ook enkele voorbeelden van tabbladen. Zijn derde voorbeeld gebruikt :targeten absoluut gepositioneerde elementen die boven de bovenkant van de pagina zijn verborgen om het gedrag van het springen van pagina's te voorkomen. Het is slim, maar over het algemeen een perfecte oplossing, omdat dat zou betekenen dat de pagina omhoog zou springen als de tabbladen verder op een pagina zouden staan.

Meer informatie

Artikel hier over CSS-Tricks: On: target
Keuzeschakelaars Niveau 4 spec
Een eenvoudige afbeeldingengalerij met: target (lijdt aan het pagina-sprong-ding, een goed voorbeeld daarvan) door Chris Heilmann
Demo van de gele fade-techniek (hoewel voor bestaande inhoud, niet voor nieuw toegevoegde inhoud) van Web Designer Notebook.
Een CSS-doel, letterlijk, door Caleb Ogden.
CSS: doelwit voor ontwerpen buiten het scherm
MDN-documenten