WEBnSTUDY.com
CSS

CSS pseudo-klase

Pseudo-klase se dodaju kao ekstenzija na selektor i služe za njegovu modifikaciju koja nastaje u određenim situacijama. Uobičajeno je da se navedu CSS deklaracije pod selektorimkoje definišu "običan" izgled, a onda da se za isti selektor navede CSS za pseudo-klasu.

selektor { [lista_deklaracija] } selektor:pseudo-klasa { [lista_deklaracija_koje_modifikuju_izgled] }

Uzmimo za primer pseudo-klasu :hover koja menja izgled elementa iznad koga se nalazi miš. Pomoću CSS-a smo definisali izgled eleemnta, a onda smo pseudo-klasom definisali šta se (i kako) na elementu menja kada korisnik pređe mišem preko njega.

Inače, pseudo-klase se mogu kombinovati, pa je tako moguće navesti više njih, jednu za drugom u istom selektoru.

selektor:pseudo-klasa:pseudo-klasa:pseudo-klasa... { [lista_deklaracija] }

Naravno, besmisleno je vezivati pseudo-klase koje su po svojoj prirodi "oprečne", kao na primer pseudo-klase :enabled i :disabled koje treba da promene izgled elementa ako je u njemu dozvoljeno/zabranjeno raditi (o njima smo pisali u tekstu Pseudo-klase elemenata forme).

Jedna veoma važna grupa su i pseudo-klase prema mestu elementa, koje se primenjuju na HTML elemente zavisno od njihovog tipa i pozicije unutar kontejnerskog bloka.

Formatiranje na osnovu statusa linka

Sledeće pseudo-klase spadaju u najstarije i najpoznatije "modifikatore" formatiranja elemenata. Najpre su zamišljene za promenu izgleda linkova, ali su neke (npr. :hover) postale prilično korišćene.

:link formatiranje (neposećenog) linka
:visited formatiranje posećenog linka
:hover formatiranje elementa nad kojim je miš
:active link (ili dugmence) u trenutku "klika"

:link

Ova pseudo-klasa se primenjuje na link elemente (<a>) i to ako nisu posećeni ("kliknuti").

:visited

Posećen link (iz razloga očuvanja privatnosti dozvoljava se samo podešavanje boje).

:hover

Bilo koji element (ne samo link) iznad koga se nalazi strelica miša.

Ovo je verovatno najkorišćenija pseudo-klasa ikada - upotrebljava se u svakoj prilici kada je potrebno uvesti interaktivnost na web stranici - sve moguće promene koje se dešavaju kada korisnik prelazi mišem preko elemenata - od prostih promena boja pa do padajućih menija.

Primer


  /* formatiranje elementa klase "primer" */
  .primer {
    color: red;
    font-weight: bold;
    background-color: #ffc;
  }

  /* kako se element ove klase menja dok je miš iznad njega */
  .primer:hover {
    background-color: #fff;
    outline: 4px red dotted;
  }

:active

Link u trenutku kada se klikne na njega, kao i bilo koji element kada se na njega prebaci fokus tasterom TAB (najčešće su to linkovi i dugmići).

Stil definisan ovom pseudo-klasom je "najslabiji" od svih pseudo-klasa koje se odnose na linkove. To znači da ako postavimo npr. boju za "aktivan" link, ona će biti zanemarena ako se kasnije definiše boja za npr. "posećen" link. Zbog toga se treba držati tzv. LVHA redosleda (Link - Visited - Hover - Active).

Pseudo-klase opšte namene

Ovo su pseudo-klase koje nisu unapred zamišljene da se koriste uz elemente nekog posebnog tipa.

:empty formatiranje praznog elementa
:target formatiranje bookmark elementa na koji nas je doveo link
:root formatiranje <html> elementa
:not(X) negacija selektora
:lang(X) formatiranje elementa prema jeziku web stranice

:empty

Ova pseudo-klasa će biti primenjena na element samo u slučaju da je prazan i to u smislu da ne sadrži ni druge podelemente, ni tekst (čak ni razmake).

:target

Pseudo-klasa :target se odnosi na maksimalno jedan element na stranici i to ako taj element predstavlja bookmark na koji je doveo link, odnosno ima setovan parametar id="X", ili <a name="X">...</a> oznaku.

Ovo naravno vaći ako u URL-u stranice postoji baš taj fragment identifikator (http://www.primer.com/strana.html#X).

Primer


  <!-- Ako je URL: http://www.sajt.com/stranica.html#drugi -->

  <style>
  h2:target {
    /* primenjuje se na onaj podnaslov na koji je "doveo" link */
  }
  </style>
  ...
  
  <h2 id="prvi">...podnaslov</h2>
  <h2 id="drugi">TARGET podnaslov</h2>
  <h2 id="treci">...podnaslov</h2>
  

:root

:root pseudo-klasa se odnosi na osnovni elemenat u HTML hijerarhiji, što je na našim web stranicama u stvari sam <html> element. Ovu pseudo-klasu nema potrebe navoditi posle nekog selektora, jer se uvek odnosi na potpuno istu stvar. Takođe, isto možemo da postignemo korišćenjem HTML sleektora html, jedino što je pseudo-klasa "jača" zbog pravila specifičnosti.

:root { [lista_deklaracija] } html { [lista_deklaracija] }

:not(X)

Ovu pseudo-klasu koristite pažljivo, pošto, ako pogrešite, rezultati mogu da budu nepredvidljivi. U pitanju je negacija selektora. Njeno delovanje bi se moglo opisati kao "primeni ovo formatiranje na elemente koji nisu...".

U zagradi se navodi neki selektor (najsigurnije funkcioniše ako zadamo prost HTML selektor ili selektor klase), pa će stil biti primenjen na one elemente koji nisu obuhvaćeni tim selektorom.

selektor:not(selektor) { [lista_deklaracija] }

Primer


  .primer :not(p) {
    /* svi elementi osim pasusa, unutar elemenata klase "primer" */
  }

  div:not(.spec) {
    /* svaki div blok koji nije klase "spec" */
  }
  

:lang(X)

Pseudo-klasa :lang definiše izgled elemenata zavisno od jezika koji je definisan za dokument. Navodi se sa zadatim jezikom u zagradi (npr. :lang(en) za engleski, :lang(fr) za francuski, :lang(de) za nemački jezik itd.)

selektor:lang(jezik) { [lista_deklaracija] }

Na kraju je ostalo još da pogledate i "živi" primer.

  1. Mozilla Developer Network, Pseudo-classes
  2. CSS Tricks, Meet the Pseudo Class Selectors
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies) radi vođenja interne statistike u cilju unapređenja korisničkog iskustva. Tako prikupljeni podaci su anonimni i nedostupni trećim licima. Vaša privatnost nije ugrožena ni na koji način.