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.
- Mozilla Developer Network, Pseudo-classes
- CSS Tricks, Meet the Pseudo Class Selectors