Kliknite događaj u čistom CSS-u bez:target. Hiperlink - što je to, kako napraviti link i umetnuti kod u HTML (href, target blank i ostali atributi a taga) Zadana vrijednost

Na Internetu možete lako pronaći mnoge upute koristeći pseudo-class:target. Ipak, nemojmo slijediti tuđi kod, nego ga pokušajmo razumjeti i razumjeti kako funkcionira? Naravno, ne možemo bez primjera.

Što je:target?

U CSS:target, ovo je pseudo-klasa koja vam omogućuje da odaberete cijeli "komad" vašeg HTML dokumenta na kojem će se izvršiti neka radnja. To može biti na primjer odlomak teksta ili naslov.

Pseudoklase ne treba brkati s pseudoelementima, koji mogu odabrati samo određeni dio elementa, kao što je prvo slovo ili prvi red odlomka.

Pseudo-klase:

• a:link(boja:#111)
• a:lebdjeti (boja:#222)
• div:prvo dijete(boja:#333)

• p::prvo-slovo(boja:#444)
• p::prvi redak(boja:#555)

ID-ovi fragmenata

Ukratko, to je stvar za koju je vezana naša pseudoklasa. Ovo je hashtag s riječju ili frazom koja se nalazi na kraju adrese. Ovako izgleda:

Ova se tehnika može koristiti za prijelaze unutar članka. Na primjer, na početku članka kreirate malu tablicu sadržaja, kada se klikne na element od kojeg osoba prelazi na odjeljak na koji vodi poveznica; odjeljak treba dodati identifikator.

Radi u čistom HTML-u, nisu potrebni nikakvi trikovi. Mali identifikatori.

Rukovanje klikom pomoću:target

Pokušajmo sada osigurati da se stil naslova mijenja kada kliknete na željeni odjeljak iz našeg improviziranog izbornika, pokazujući koji je odlomak trenutno aktivan.

H1 (font: 30px Arial sans-serif;) h1:target (veličina fonta: 50px; ukras teksta: podcrtano; boja: #37aee4;)

Kod je vrlo jednostavan - kada se klikne, naslov mijenja veličinu, boju i podcrtan je. Možete dodati život (Ruslan, bok) i napraviti animaciju za promjenu boje naslova:

H1 ( font: 30px Arial sans-serif; -webkit-prijelaz: lakoća boje 0,5 s; -moz-prijelaz: lakoća boje 0,5 s; -o-prijelaz: lakoća boje 0,5 s; -ms-prijelaz: lakoća boje 0,5 s; prijelaz: boja 0,5 s lakoća;

Isticanje aktivnog naslova je dobra stvar, ali što ako trebate promijeniti dizajn teksta koji ga slijedi? CSS nam daje ovu priliku. Ovako izgleda:

H1:target + p ( pozadina: #eaeaea; padding: 10px; )

U ovom slučaju znak plus znači da stil treba primijeniti na odlomak koji slijedi iza naslova. Tako, kada se promijeni aktivno zaglavlje, mijenjamo i dizajn odjeljka s tekstom koji mu “pripada”.

Podrška za preglednik

Ciljana pseudoklasa pripada trećem izdanju CSS-a i savršeno je podržavaju svi preglednici osim IE, starije od verzije 9. Stoga je ne biste trebali implementirati ako vaša publika koristi ovaj preglednik. Iako, postoji izlaz - ovo je Selectvizr, JS biblioteka s kojom možete natjerati IE da radi s CSS3. Samo dodamo skriptu i to je to, radi.

Jedina stvar je, ako ne koristite JQuery ili MooTools, morate ih povezati da bi ova skripta radila. Službena web stranica ima tablicu koja pokazuje koje knjižnice podržavaju što. Ako vas zanima, pročitajte. ovo .

Zaključak

Korištenje pseudo klasa može se činiti komplicirano, ali nakon što shvatite kako rade, možete raditi nevjerojatne stvari koristeći samo CSS i ništa drugo. Pseudoklasa: cilj- izvrsna potvrda ovoga. Uz njegovu pomoć možete radikalno promijeniti interakciju stranice s posjetiteljem. Gornji primjer je najjednostavniji, ali ipak dodaje malo interaktivnosti stranici. Ali ovo je samo nekoliko redaka koda.

Ne pretjerujte s ljepotom i podrškom preglednika i sve će biti u redu.

ugodan dan

Danas ćemo govoriti o glavnim funkcijama koje se odnose na s pseudo klasom :cilj i kako ga možete koristiti za stvaranje nevjerojatnih efekata s čistim CSS-om, naučite kako izraditi dijaprojekcije css pomoć i mnogo više.

Što je: meta?

h1 (font: bold 30px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; ) h1: cilj (veličina fonta: 50px; ukras teksta: podcrtano; boja: #37aee4; )

Dodajmo animaciju

Začinimo naš efekt i dodajmo malo animacije, poput lijepog malog prijelaza za promjenu boje. Pogledajte kako radi.

h1 ( font: bold 30px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; -webkit-transition: boja 0,5s lakoća; -moz-prijelaz: boja 0,5s lakoća; -o-prijelaz: boja 0,5 s ease; -ms-transition: color 0.5s ease; prijelaz: color 0.5s ease;

Upravljanje neciljanim objektima

Recimo da želimo promijeniti stil odlomka koji dolazi nakon odabranog naslova.

Ovo je vrlo jednostavno učiniti pomoću sljedećeg koda. Pogledajte demo.

h1: cilj + p (pozadina: #f7f7f7; ispuna: 10px;)

Stvaranje jednostavnog dijaprojekcije pomoću CSS-a

Programeri su osmislili gomilu aplikacija koristeći pseudo klasu : cilj. Ovaj pseudo-selektor može biti koristan pri stvaranju kartica ili čak dijaprojekcija. Pogledajmo kako se potonje može implementirati.

Kreirajmo nesređeni popis. Svaka stavka popisa sadržavat će sidro oznake koje pokazuje na ID isječka i sliku s odgovarajućim ID-om.

• Jedan
• Dva
• Tri
• četiri
• Pet

Dodajmo sada naše stilove:

* ( margina: 0px; padding: 0px; ) #slideshow ( margina: 50px auto; pozicija: relativna; širina: 400px; ) ul ( list-style: ništa; ) li ( float: lijevo; overflow: skriveno; margina: 0 20px 0 0; ) li a (boja: #222; dekoracija teksta: ništa; font: 15px/1 Helvetica, sans-serif; -webkit-prijelaz: lakoća boje 0,5s; -moz-prijelaz: lakoća boje 0,5s; -o-transition: color 0.5s ease; -ms-transition: color 0.5s ease; prijelaz: boja 0.5s ease; lijevo: 0; webkit-transition: neprozirnost 1s ease-in-out; -o-transition 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; prijelaz: neprozirnost 1s ease-in-out;

Prvo dodajmo plovak: lijevo sve elemente na našem popisu. Za elemente smo koristili apsolutno i relativno pozicioniranje.

Zatim, idemo instalirati z-indeks: -1 za sve slike, a zatim postavite z-indeks: 1 za ciljane slike. To će uzrokovati promjenu slike kada kliknete na stavku popisa. Kako bi prijelaz bio glatkiji, postavit ćemo vrijednost neprozirnosti za ostale slike 0 .

Pogledajte prezentaciju čistog CSS-a.

Kompatibilnost s različitim preglednicima

Pseudoklasa : cilj je CSS selektor treće razine, što znači da je podržan u gotovo svim preglednicima osim (nikada nećete pogoditi) ... TJ. Dobri stari magarac podržava samo CSS3 selektore u verzijama 9 i 10.

Kao i svaki drugi problem s prikazom CSS3 selektora u IE-u, ovo je prilično jednostavno rješenje pomoću Selectivizra.

Zahvaljujući ovom dodatku i malo vudu magije, potrebni CSS3 selektori bit će podržani čak iu IE6.

Zaključak

Korištenje pseudo-klasa može se isprva činiti komplicirano, ali shvatit ćete kako vam one mogu olakšati rad i učiniti vašu stranicu zanimljivijom. Pseudo-selektor

:cilj- dobar primjer za to. Samo pazite da ne pretjerate sa stilovima.

Još jedan zanimljiv slučaj upotrebe :cilj

Pozdrav, dragi čitatelji bloga. Odlučio sam današnju publikaciju posvetiti najvažnijem aspektu webmasteringa, gdje ću pokušati detaljno objasniti što je hiperveza, koja je neraskidivo povezana s kojom je, pak, bez pretjerivanja, osnova interneta.

Ali kako biste ispravno stvorili hiperveze i umetnuli ih u kod web stranica (na primjer, vaše web stranice), morate proučiti odgovarajuće područje jezika za označavanje hiperteksta (), budući da su ti elementi oblikovani pomoću HTML-a tag, koji ima mogućnost nadogradnje veze na željenu jednu vrstu.

Dakle, danas ćemo pogledati od kojih se dijelova sastoji hiperveza, kako korištenje atributa target blank omogućuje otvaranje stranice u novom prozoru (kartici), kako bilo koju sliku učiniti vezom i mnoge druge važne detalje. Između ostalog, ove informacije će vas unaprijediti u učenju HTML jezika.

Što je hiperveza i može li se nazvati vezom?

Odgovarajući na pitanje postavljeno u naslovu, reći ću da pojam "veznica" ima širi semantički spektar (veznica sa Sibirom, bankarstvo za identifikaciju platitelja, tekst u knjizi itd.), uključujući značenje svojstveno konceptu “hiperlink” , koji je povezan samo s hipertekstom, što omogućuje nelinearno percipiranje informacija.

Tako, hiperveza je poseban slučaj veze, pa ih je sasvim moguće ravnopravno koristiti u današnjim temama. To je ono što ću koristiti u svoju korist tijekom današnjeg posta, koristeći oba pojma kako bih izbjegao nepotrebnu neželjenu poštu ključnih riječi.

Ali postoje i nevidljivi servisi, stvoreni korištenjem i smješten unutar, čija je zadaća slanje brojnih signala i naredbi preglednicima za obavljanje određene funkcije.

Na primjer, korištenjem servisnih hiperveza moguće je prikazati ikonu. Mogu se vidjeti samo kao dio HTML koda (za to kliknite bilo koju stranicu otvorenu u pregledniku):

Za sada ostavimo veze usluga na miru i razmotrimo opći obrazac stvaranja hiperveza. Zajedničko im je da svi imaju potreban href atribut, čija je vrijednost adresa dokumenta (). HTML poveznica može voditi do unutarnje stranice stranice ili vanjskog dokumenta.

Još jedna važna napomena. Korištenje atributa href čini hiperveze klikabilnim, odnosno omogućuje korisnicima da automatski odu na odgovarajuću stranicu web stranice kao rezultat klika na njih.

Kako napraviti hipervezu u HTML-u koristeći href

Dakle, već znamo da su za stvaranje veze potrebni a tag i href atribut, čiji parametri mogu biti URL-ovi različitih vrsta. Jer a ovo, zatim između otvora i zatvaranje sadrži sadržaj koji će biti prikazan na web stranici.

Ovaj sadržaj se naziva sidro i može se predstaviti u obliku teksta ili slike (više ćemo govoriti o tome kako napraviti sliku na poveznici u nastavku). Kao što sam već napomenuo, na sidro će se moći kliknuti. Pogledajmo primjer hiperveze s tekstualnim sadržajem. Ovako će njegov dizajn izgledati u HTML kodu:

malo o sidrima

Osim HTTP-a, može se koristiti i sigurni HTTPS protokol. Poveznica ne mora voditi na web stranicu. Sve ovisi o href vrijednosti, koja može biti put do neke datoteke:

//site/wp-content/uploads/2012/05/giperssylqi-v-html.jpg

preuzimanje datoteka

Na web stranici ova će poveznica imati sljedeći oblik:

Preglednik "razumije" da objekt s ekstenzijom .zip može biti namijenjen samo za preuzimanje, što je ono što se od korisnika traži.

Usput, put do bilo koje datoteke ponekad je naznačen putem FTP(). Zatim u URL-u koji se koristi kao parametar atributa href trebate jednostavno zamijeniti HTTP protokol (HTTPS) s FTP-om. Veza datoteke će izgledati ovako:

preuzeti sa servera

Ali to nije sve. Na sličan način veza za e-poštu kreira se pomoću pseudoprotokola mailto Za brzi pristup alatu za pisanje pisama:

pisati pisma

Nakon što kliknete na takvu poveznicu, trebao bi se pojaviti prozor zadanog klijenta e-pošte u kojem možete sastaviti tekst poruke i poslati je na već navedenu adresu, preuzetu, kao što vjerojatno pogađate, iz href-a.

U praksi su hiperveze na poštu vrlo često ranije koristili webmasteri i vlasnici velikih resursa kako bi osigurali pogodnost korisnicima i klijentima koji su mogli pristupiti obrascu za poštu jednim klikom.

Ali ova vrsta komunikacije na web resursima više nije toliko popularna (pogotovo jer se može instalirati, na primjer), jer e-mail adrese otvorene na ovaj način aktivno presreću softver i koriste ih razne vrste spamera.

Dao sam kao primjer samo najčešće protokole koji su dio URL-a, koji je pak parametar atributa href prilikom formiranja hiperveze. Uz HTTP (HTTPS), FTP i mailto, postoje i drugi za rješavanje specijaliziranijih problema. Možda ćemo ih detaljnije pogledati u drugim publikacijama.

Vrste hiperveza

Pokušajmo sada klasificirati veze prema određenim kriterijima.

Prema svom opsegu:

1. Vanjski— vode do stranica koje se nalaze izvan stranice na kojoj su objavljeni;

2. Domaći— povezivanje web stranica koje se nalaze unutar istog web izvora.

Po formatu:

2. Grafički e - u ovom slučaju, sidro hiperveze je slika (uključujući minijaturu), banner, gumb itd.

Prema vrsti URL-a koji služi kao vrijednost atributa href:

1. Apsolutno, koji sadrže eksplicitnu naznaku protokola prijenosa podataka (primjerice HTTP) i naziva domene stranice (u svemu o domenama).

Takve veze se najčešće koriste kada se upućuje na stranice vanjskih izvora. U ovom slučaju, href vrijednost će uključivati ​​puni put do željene datoteke ili web stranice. Evo primjera apsolutne hiperveze:

Kontekst - što je to?

2. Relativni, čija će jedna od opcija za izradu biti staza navedena u odnosu na korijensku mapu web stranice (otuda i naziv ove vrste hiperveze). U tom će slučaju protokol (HTTP) i domena stranice biti uklonjeni iz URL-a:

Kontekst - što je to?

Relativne hiperveze na web stranici mogu pružiti poveznice na interne stranice. U ovom obliku su kraći, što olakšava HTML kod. Naravno, sve nije tako jednostavno, i zahtijeva širi obuhvat, u što se možete uvjeriti ako pratite navedeni link.

Atributi oznake a

Sada da vidimo koji drugi atributi postoje, osim potrebnog href, i kako oni mogu utjecati na stvaranje hiperveze. Najcjelovitije podatke o tome, da tako kažem, “iz prve ruke” možete pronaći na službenim stranicama Međunarodnog konzorcija W3C, gdje se najbrže pojavljuju ažurne informacije.

Potpuno su identični i pokreću otvaranje web stranice u trenutnoj kartici. Ako želite da se stranice otvaraju u novoj kartici kada slijedite veze, trebali biste dodati kada kreirate vezu ciljni atribut s praznim parametrom:

Kontekst - što je to?

Iako neki webmasteri i stručnjaci za SEO vjeruju da je bolje da se posjetitelju pruži mogućnost izbora (odnosno, ne navede ciljano prazno), jer ako je potrebno, stranica se može otvoriti u novoj kartici pomoću kontekstnog izbornika (pomakni pokazivač na poveznicu, kliknite desnom tipkom miša i kliknite na odgovarajuću točku):

Štoviše, kao što vidite, u ovom slučaju korisnik ima prednost jer je moguće otvoriti web stranicu ne samo u novoj kartici, već i u novom prozoru(ova se opcija ne može implementirati putem HTML-a, samo pomoću skripti).

Ali vjerujem da nisu svi korisnici početnici u potpunosti upoznati s mogućnostima i postavkama popularnih preglednika (). Vrlo je vjerojatno da će čitatelj, nakon što je slijedio vanjsku hipervezu i izgubio iz vida izvornu stranicu (umjesto toga pojavit će se dokument primatelja), jednostavno frustrirano zatvoriti karticu.

Dakle, vlasnik web resursa može ne samo izgubiti obećavajućeg posjetitelja, već i dobiti pogoršanje čimbenika ponašanja (), što će dovesti do gubitka pozicije stranice u rangiranju.

Osim toga, otvaranje stranice u susjednoj kartici vrlo je zgodno s gledišta upotrebljivosti (). Korisnik slijedi hipervezu na web stranicu, prima dodatne informacije i, kao da se ništa nije dogodilo, nastavlja proučavati glavni materijal.

Za stvaranje objektivne slike, treba dodati da se ispostavlja da je primjena “target="_blank"” na sve vanjske poveznice prepuna određenih sigurnosnih rizika. Ako nekoga zanima, možete pročitati gdje su dane preporuke za rješavanje problema pri korištenju ciljne praznine, kao i alternativne opcije za provedbu zadatka otvaranja web stranice u novoj kartici.

Čini se da sam primijetio sve prednosti i nedostatke korištenja prazne vrijednosti za otvaranje hiperveze u novoj kartici. Ako ste čitali članke na mom blogu, vjerojatno ste već pogodili moj stav prema ovom parametru ciljanog atributa.

Trenutačno mi njegove prednosti nadmašuju nedostatke i ja sam bezuvjetni navijač. Na temelju gore navedenih činjenica možete stvoriti vlastito mišljenje o ovom pitanju. Iako... uzimajući u obzir pojavu novih okolnosti, to se može promijeniti.

Kako napraviti hash linkove, sidra i zašto su oni potrebni?

Sljedeće, želio bih vam skrenuti pozornost na drugu vrstu hiperveza, koja može biti korisna ako je materijal koji se nalazi na web stranici prilično opsežan i treba ga strukturirati tako da poboljša navigaciju.

Ne morate daleko tražiti primjer, samo pogledajte sadržaj ove publikacije na samom početku. Vidite li da postoji popis odjeljaka članka? Hiperveze na ove odjeljke samo su hash veze. Nakon klika na bilo koji od njih, preglednik će pomaknuti stranicu do mjesta gdje počinje odgovarajući dio.

Takve se veze stvaraju vrlo jednostavno. Prvo morate stvoriti sidro postavljanjem odgovarajuće oznake na traženo mjesto na stranici u obliku ID-a, koji je jedan od globalnih atributa koji se primjenjuje na bilo koju HTML oznaku.

Zahvaljujući univerzalnosti ID-a, takve sidrene oznake mogu se instalirati gotovo bilo gdje na web stranici. Budući da je tekst obično podijeljen na odlomke, oni se također mogu primijeniti na . Uglavnom stavljam sidra pomoću kojih su članci podijeljeni na logične dijelove:

Nakon što smo tako označili sva potrebna mjesta u HTML kodu, kreiramo hiperlinkove na njih. Da bismo to učinili, na kraju, nakon posljednje kose crte “/” u URL-u (što je, kao što već znate, vrijednost atributa href), uzastopno pišemo znak “#” i naziv oznake (ID ):

Kako formirati hash veze i sidra?

Štoviše, ako je takva veza sidra postavljena na istu stranicu kao i sidra, tada se dio URL-a do i uključujući posljednju kosu crtu prije hash-a može izostaviti i samo "#" plus naziv ID-a koriste se kao parametar href (u biti, ovo je jedna od opcija za relativne veze):

Kako formirati hash veze i sidra?

To jest, kada sastavljate tablicu sadržaja za priručnik za optimizaciju HTML koda, možete jednostavno koristiti ovu laganu opciju. Ako kao URL stavite samo jedan hash znak, bez imena identifikatora, tada će se od mjesta gdje se nalazi takva poveznica stranica pomicati skroz prema gore:

Vrh

Zapravo, ovo je najjednostavnija opcija, koja opet služi kao dodatna prednost za iskoristivost resursa, jer olakšava život posjetiteljima. Možete koristiti atraktivnu sliku kao sidro za izradu gumba.

Kako ukloniti podcrtavanje i promijeniti boju veze

HTML programeri su razmislili o gotovo svim nijansama koje mogu pomoći u optimizaciji ovog ili onog aspekta, isto vrijedi i za hiperveze. Na primjer, slijedeći hipervezu na drugu web stranicu i vraćajući se natrag, korisnik će vidjeti da je hiperveza promijenila boju.

Ako treba ponavljati takve radnje više puta, moći će brzo odrediti na koje je poveznice već kliknuo, a na koje nije. Ova opcija je uključena u gotovo svaki preglednik. Nema potrebe objašnjavati koliko je to praktično i koliko štedi vremena.

Zadane i ne-CSS hiperveze istaknuto podcrtavanjem i tri opcije boja, od kojih svaki ima svoj atribut za:

• veza - postavlja boju hiperveze na web stranici (prema zadanoj postavci plava, koja je označena #0000ff);
• alink — boja aktivne hiperveze za vrijeme dok je obrađuje web preglednik (crveno #ff0000);
• vlink — boja poveznice koju je korisnik posjetio (ljubičasta, #800080).

Kako možete promijeniti boje poveznica koje preglednici prikazuju za vašu stranicu? Pa, za jednostavnu HTML stranicu na kojoj se stranice izrađuju ručno (a mislim da u suvremenoj stvarnosti praktički nema potpuno funkcionalnih resursa ove vrste, osim možda jednostavnih dnevnika i odredišnih stranica), samo trebate pronaći početnu oznaku i navedite potrebne parametre za njega (usput, možete koristiti njegovo ime za označavanje boje), na primjer:

Ako ste instalirali sustav za upravljanje sadržajem () za upravljanje svojim web resursom, tada, bez obzira na vrstu motora koji koristite, trebate otvoriti za uređivanje datoteke odgovorne za prikaz zaglavlja (zaglavlja), gdje postoji oznaka za otvaranje .

Ako vaš resurs pokreće WordPress, tada za praktičnu implementaciju ove ideje možete ga koristiti kao alat za automatsko umetanje slike unutar hiperveze, gdje prvo odaberete iz biblioteke ili preuzmete željenu sliku i umetnete je u tekst:

Zatim odaberite kod dobivene slike i pritisnite gumb "link" u uređivaču, nakon čega u prozor koji se pojavi zalijepite željenu kopiranu hipervezu:

Pseudo-class:target odabire element u dokumentu na koji ukazuje URL fragment. Na primjer, ovaj je dio teksta omotan u element s ID #target-test . Ako slijedite vezu, taj će element postati cilj i stilovi pseudo-class:target stupit će na snagu.

Prošle sam godine pisao o pseudo-klasi:target u članku 5 nedovoljno korištenih CSS selektora (i kako ih koristiti). Prvi primjer bio je korištenje pseudo-class:target za isticanje odjeljka stranice do kojeg se došlo. To može biti, na primjer, dodavanje boje pozadine ili obruba, kao u primjeru s .

Ali nedavno sam došao do zaključka da pseudo-klasu:target možemo koristiti u veću korist stvaranjem interaktivnih elemenata na stranici bez JavaScripta.

Primjer #1: Skrivanje i prikazivanje sadržaja

Jednostavan primjer korištenja pseudo-klase:target bio bi skrivanje i prikazivanje sadržaja koji ciljamo. U blogu tako možemo prikazati odjeljak s komentarima nakon što korisnik klikne. To se postiže jednostavnim skrivanjem elementa dok ne padne pod:target.

Prikaži komentare #comments:not(:target) ( display: none; ) #comments:target ( display: block; )

Primjer #2: Navigacija na izvlačenje

Sljedeći primjer je stvaranje klizne navigacijske trake. Navigacijsku traku postavljamo fiksno u odnosu na opseg kako bismo osigurali da nema skakanja nakon što korisnik klikne.

#nav ( položaj: fiksno; vrh: 0; visina: 100%; širina: 80%; maks. širina: 400px; ) #nav:not(:target) ( desno: -100%; prijelaz: desno 1,5 s; ) #nav:target ( desno: 0; prijelaz: desno 1s; )

Primjer #3: Skočni modalni prozor

Uzimajući ovu ideju dalje, možemo stvoriti modalni prozor koji ispunjava cijelu stranicu.

#modalni-spremnik ( položaj: fiksni; vrh: 0; lijevo: 0; širina: 100%; visina: 100%; pozadina: rgba(0,0,0,0.8); prikaz: savitljiv; opravdanje-sadržaj: centar; align-items: center;) .modal (width: 70%; background: #fff; padding: 20px; text-align: center; ) #modal-container:not(:target) ( neprozirnost: 0; vidljivost: skriveno; prijelaz: neprozirnost 1s, vidljivost 1s;) #modal-container:target (prozirnost: 1; vidljivost: vidljivost; prijelaz: neprozirnost 1s, vidljivost 1s;)

Primjer #4: Promjena globalnih stilova

Posljednji primjer se ne može nazvati ispravnim u smislu semantike; to je primjena pseudoklase:target na element nakon čega slijedi promjena stilova ili izgleda stranice.

#body:not(:target) ( main ( width: 60%; ) aside ( width: 30%; ) .show-sidebar-link ( display: none; ) ) #body:target ( main ( width: 100%; ) na stranu ( prikaz: ništa; ) .hide-sidebar-link ( prikaz: ništa; ) )

Što je sa semantikom i dostupnošću?

Kao što sam već spomenuo u članku "Veze ili gumbi", kada koristite element Preglednik čeka da prijeđe na drugu stranicu ili drugi dio stranice. U mojim primjerima (osim posljednjeg) događa se upravo to. Jedini trik je da je u normalnom stanju stilizirani element skriven, dinamički će se pojaviti samo u ciljanom stanju.