Steknite više moći nad svojim web dizajnom pomoću ovih naprednih CSS selektora.

CSS podržava razne selektore za prepoznavanje elemenata za stiliziranje, svaki sa svojim skupom pravila. Dok je većina metoda odabira jednostavna, pseudoklase i pseudoelementi pružaju veću fleksibilnost. Omogućuju odabir elemenata na temelju njihovog stanja ili položaja unutar strukture ili odabir određenih dijelova sadržaja.

Korištenje ovih selektora može biti nezgodno i lako je pomiješati pseudo-klase s pseudo-elementima, pa kako ih razlikovati?

Razumijevanje CSS pseudo-klasa

CSS pseudoklasa je poput posebne ključne riječi koju možete koristiti sa selektorima za stiliziranje elemenata na različite načine. Ove vam ključne riječi pomažu u ciljanju elemenata kada se dogode određene stvari, primjerice kada korisnik prijeđe pokazivačem miša iznad elementa, klikne ga ili upiše nešto u polje za unos.

Pseudo-klase čine vašu web stranicu interaktivnijom i responzivnijom mijenjanjem načina na koji elementi izgledaju ili se ponašaju na temelju radnji korisnika. Kada ti

instagram viewer
koristite ih s drugim CSS selektorima, pružaju preciznu kontrolu nad stilom i interaktivnošću.

Sintaksa i upotreba CSS pseudoklase

Sintaksa za CSS pseudo-klasu sastoji se od dvotočke (:) nakon čega slijedi naziv pseudoklase. Evo osnovne sintakse:

selector:pseudo-class {
/* styles */
}

U ovoj sintaksi:

  • selektor odnosi se na element ili elemente koje želite odabrati i na koje želite primijeniti stilove. To može biti HTML element, klasa, ID ili složeniji birač poput kombinacije. Selektor nije obavezan, ali obično ćete ga koristiti; bez njega će vaša pseudoklasa ciljati sve elemente na koje se može primijeniti.
  • pseudoklasa je ključna riječ koja predstavlja određeno stanje ili stanje koje želite ciljati.

CSS kategorizira pseudoklase u nekoliko grupa na temelju njihove funkcionalnosti i uvjeta na koje ciljaju. Evo glavnih kategorija uz nekoliko primjera:

Interakcija korisnika

:lebdjeti

Odabire element kada se pokazivač miša nalazi iznad njega.

:aktivan

Odabire element kada ga korisnik aktivira, obično klikom.

:posjećeno

Odabire poveznice koje je korisnik posjetio.

Strukturalni

:prvo dijete

Odabire prvi podređeni element nadređenog.

:zadnje dijete

Odabire posljednji podređeni element nadređenog.

:n-to dijete (n)

Odabire elemente na temelju njihovog položaja unutar roditelja, što vam omogućuje ciljanje određene djece.

Vezano za obrazac

:onemogućeno

Odabire onemogućene elemente obrasca.

:provjereno

Odabire označene radio gumbe ili potvrdne okvire.

Stanje elementa korisničkog sučelja

:nevažeći

Odabire nevažeće elemente obrasca.

:potreban

Odabire potrebna polja elemenata obrasca.

: izborno

Odabire elemente obrasca koji su izborna polja.

Povezano s vezom

:veza

Odabire neposjećene veze.

Na temelju jezika

:lang()

Odabire elemente na temelju jezika navedenog u njihovom atributu "lang".

Možete pokušati s uobičajenim primjerom primjenom :hover efekata na slike u galeriji. Tipični stilovi uključuju povećanje ili blijeđenje ovih slika kada netko prijeđe pokazivačem iznad njih.

Istraživanje CSS pseudoelemenata

CSS pseudoelement je poput posebne ključne riječi koju možete koristiti sa selektorima za stiliziranje određenih dijelova sadržaja elementa ili za umetanje dodatnog sadržaja. Ove ključne riječi omogućuju ciljanje i stiliziranje elemenata na temelju njihove strukture sadržaja.

Pseudoelementi poboljšajte dizajn i izgled svoje web stranice dajući vam mogućnost stiliziranja elemenata na načine koji su tradicionalno bili mogući samo s pravim HTML elementima.

Sintaksa i implementacija CSS pseudoelemenata

Pseudoelementi u CSS-u imaju specifičnu sintaksu koja uključuje korištenje dvije dvotočke (::) nakon čega slijedi naziv pseudoelementa. Evo osnovne sintakse:

selector::pseudo-element {
/* styles */
}

U ovoj sintaksi:

  • selektor cilja na element na koji želite primijeniti pseudoelement. To može biti bilo koji valjani CSS selektor, uključujući nikakav.
  • pseudoelement je naziv pseudoelementa koji želite ciljati. Možete koristiti samo jedan pseudoelement u selektoru budući da oni zapravo nemaju smisla u kombinaciji.

Evo nekih od pseudoelemenata:

::prije

Umeće sadržaj prije sadržaja odabranog elementa.

::nakon

Umeće sadržaj nakon sadržaja odabranog elementa.

::prvo slovo

Stilizira prvo slovo teksta unutar elementa.

::izbor

Stilizira dio teksta koji je korisnik odabrao svojim kursorom.

::marker

Stilizira okvir markera stavke popisa (npr. grafičku točku ili broj na popisu).

::mig

Primjenjuje stilove na znakove u medijskim elementima kao što su

The ::prije i ::poslije pseudo elemenata može biti posebno teško razumjeti, pa će vam njihovo prakticiranje pomoći da svladate ostalo.

Sličnosti i razlike

Evo sličnosti i razlika između CSS pseudo-klasa i pseudo-elemenata:

Pseudo-klase

Pseudoelementi

Sintaksa

Prefiks s jednom dvotočkom (:).

S prefiksom dvije dvotočke (::).

Korištenje

Odaberite i stilizirajte elemente na temelju njihovog stanja, položaja ili interakcije s korisnikom.

Stilizirajte određene dijelove sadržaja elementa ili stvorite virtualne elemente.

Selektori

Može se pojaviti u bilo kojem trenutku unutar složenog ili složenog selektora.

Mora biti konačna komponenta selektora i može se pojaviti samo jednom.

Umetanje sadržaja

Ne umeće sadržaj, prvenstveno za stiliziranje na temelju stanja.

Može umetnuti sadržaj ili virtualne elemente prije ili poslije sadržaja odabranog elementa.

Tipografski stil

Obično se ne koristi za tipografski stil.

Koristi se za tekst i tipografski stil (npr. ::prvi redak, ::prvo slovo).

Ciljani dijelovi

Cilja cijele elemente.

Cilja određene dijelove sadržaja elementa.

Podrška za preglednik

Općenito dobro podržan.

Općenito dobro podržan, ali neki stariji preglednici mogu imati ograničenu podršku.

Pseudo-klase i pseudo-elementi važni su u CSS-u za stvaranje različitih stilova i interaktivnih značajki. Iako imaju neke sličnosti, svaki od njih ima svoju jedinstvenu ulogu u web dizajnu i razvoju.

Pseudoklase i pseudoelementi na djelu

Možete vježbati korištenje CSS pseudo-klasa i pseudo-elemenata u različitim projektima kako biste procijenili svoje razumijevanje. Primjeri jednostavnih projekata koje možete napraviti uključuju, između ostalog, kartice profila, navigacijske izbornike i stiliziranje popisa. Ovi projekti pružaju praktično iskustvo za poboljšanje vaših CSS vještina uz uključivanje interaktivnosti i stila u vaš web dizajn.