: cilj - CSS-trikovi | CSS Almanah 2025

:targetSelektor pseudo u CSS utakmice kada je mljeveno meso u URL i ID elementa su isti. Na primjer, ako je trenutni URL:

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

A ovo je postojalo u HTML-u:

 Content

Ovaj bi se izbornik podudarao:

:target ( background: yellow; )

I taj sectionbi element imao žutu pozadinu.

S tim generičkim izborom selektora (koji podudara sve što je slučajno cilj), ako se URL promijeni da završava #faqi postoji drugi element s ID-om faq, taj će se selektor ponovno podudarati i #faqelement će imati žutu pozadinu.

Mogli biste ga ograničiti tako što ćete precizno odrediti koje elemente želite ciljati

#voters:target ( )

Kada biste ovo koristili?

Jedna je mogućnost kada želite stil s "državama". Kada stranica ima određeni hash, ona je u tom stanju. Nije baš tako svestran kao manipuliranje imenima klasa (budući da može biti samo jedan i može biti povezan samo s jednim elementom), ali je sličan. Sve što biste mogli učiniti mijenjajući klasu za promjenu stanja, mogli biste učiniti kada je element u :target. Na primjer: promijenite boje, promijenite položaj, promijenite slike, sakrijte / pokažite stvari, što god.

Koristio bih sljedeća pravila kada :targetje dobar izbor:

Kad je potrebna "država"
Kada je prihvatljivo ponašanje preskakanja / raspršivanja veze
Kada je prihvatljivo utjecati na povijest preglednika

Kako se dobivaju hashovi u URL-ovima?

Najčešći je način da korisnik klikne vezu koja uključuje raspršivanje. To može biti interna veza (na istoj stranici) ili potpuno kvalificirani URL koji se završava s hashom i vrijednošću. Primjeri:

Go To There Go To There

Ponašanje skakanja

Bez obzira radi li se o istoj stranici ili ne, ponašanje preglednika je pomicanje stranice dok taj element ne bude na vrhu stranice . Ili, koliko može, ako se ne može pomicati toliko daleko. To je prilično važno znati, jer znači da je iskorištavanje ovog "navedenog" ponašanja pomalo nezgodno / ograničeno.

Na primjer, jednom sam pokušao razne tehnike za repliciranje funkcionalnih CSS kartica, ali na kraju sam odlučio da je korištenje hack-a bio bolji način jer izbjegava probleme s preskakanjem stranica. Ian Hansson iz CSS Science također ima nekoliko primjera kartica. Njegov treći primjer koristi :targeti apsolutno pozicionirane elemente skrivene iznad vrha stranice kako bi se spriječilo ponašanje prilikom preskakanja stranice. Pametno je, ali sveukupno savršeno rješenje, jer bi to značilo da će stranica skočiti prema gore ako se jezičci spuste dalje na stranici.

Više informacija

Članak ovdje o CSS trikovima: Na: target
Selektori Razina 4 spec
Jednostavna galerija slika koja koristi: target (pati od problema sa preskakanjem stranice, dobar primjer za to) Chrisa Heilmanna
Demo tehnika žutog blijeđenja (iako za postojeći sadržaj, a ne za novo dodani sadržaj) iz Bilježnice Web dizajnera.
CSS meta, doslovno, Caleb Ogden.
CSS: cilj za dizajne izvan ekrana
MDN dokumenti