Pseudo klase

Pseudo klase su selektori čiji naziv obuhvata STANJE elementa. Na primer, stanje elementa definisano kao :hover znači da se miš nalazi iznad njega. Ovo vam je poznato ako ste ikada bili na nekoj stranici koja ima linkove i u momentu kada mišem predjete preko linka, link promeni boju ili se pojavi neka druga boja u pozadini. Pomenuto se može prikazati kao:

<a href=”#”>Link</a>

Sada zamislimo situaciju koju smo prethodno opisali. Znači, želimo da boja teksta Link bude crvena a da u momentu kada se miš nalazi iznad teksta, tekst bude obojen u plavo. To ćemo zapisati kao:

a {color:red;}

a:hover{color:blue;}

Upravo poslednji red definiše pomenuto stanje kada se miš nalazi iznad teksta i primeniće se pravilo a:hover

Ovi selektori nazivaju se pseudo, jer mnogi od njih opisuju stanja elemenata a ne samo elemente.

Prve pseudo selektore koje ćemo obraditi odnose se na linkove, tačnije različita stanja <a> tagova.

Najkorisniji pseudo selektori kod a taga su :visited, :hover i :active.

Da bi pojasnili a:visited treba znati da pretraživač pamti na koje linkove ste kliknuli tokom posete odredjenoj web strani. Upravo na te linkove biće primenjen CSS stil koji je obuhvaćen selektorom a:visited . U primeru ispod, definisaćemo da svi posećeni linkovi zadrže boju magenta:

a:visited { color:magenta;}

Na taj način, tekst linka na koji ste kliknuli ostaće u magenta boji pa ćete ih lako razlikovati od onih koje još niste posetili.

Drugi u nizu naziva se a:hover ali smo njega već pojasnili. Ovo je verovatno najviše korišćeni pseudo selektor.

Da bi objasnili treće pomenuti pseudo selektor :active uzećemo primer u kome su nabrojana sva stanja i objasniti šta se dešava:

a {color:red;}

a:hover {color:blue;}

a:active {color:green;}

a:visited {color:yellow;}

 

CSS kod iznad govori pretraživaču sledeće:

a {color:red;} – Boje teksta svih tekstova koji se nalaze unutar a taga oboj u crveno kada učitavaš stranicu.

a:hover {color:blue;} – Kada korisnik stane mišem iznad nekog linka, promeni boju tog teksta u plavu a kada mišem ode vrati je na podrazumevanu crvenu.

a:active {color:green;} – Kada korisnik stane iznad linka, zbog prethodnog pravila primeni plavu boju a u trenutku kada korisnik klikne na link, tj. dok drži pritisnut levi taster miša nad njim, promeni boju teksta u zelenu

a {color:red;} – Nakon otpuštanja miša, vrati je na podrazumevano stanje (crvena), a odmah zatim primeni CSS pravilo za posećene linkove – a:visited {color:yellow;}.

Po završetku ovog procesa, link ostaje u žutoj boji. To je otprilike ceo proces.

NAPOMENA: Važno je da znate da red, blue, green, yellow nisu proizvoljne vec službene reči u css-u i predstavljaju crvenu, plavu, zelenu i žutu boju, respektivno. Više o bojama i paletama boja kasnije.

Pseudo klasa :focus

:focus klasa primenjuje se na elementima koji se obično nalaze u HTML formama a aktiviraju se u trenutku kada kliknete mišem unutar odredjenog polja forme. Daćemo primer:

input:focus {background-color:green;}

govori pretraživaču da u trenutku kada u polje input korisnik klikne mišem u cilju unosa podataka, pozadinu tog pravougaonog prostora oboji u zelenu boju. Nakon prelaska u neku drugu ćeliju, boja pozadine prethodne ćelije vraća se na podrazumevanu. Momenat kada korisnik napušta ćeliju definiše se stanjem :onblur i inicira ili klikom izvan forme ili prelaskom na drugo polje korišćenjem tastera TAB.

Pseudo selektori za selektovanje odredjenih elemenata u okviru niza

Ovi pseudo selektori primenjuje se u slučaju da želite da ciljate svaki drugi ili svaki n-ti ili n-1 element unutar roditeljskog elementa.

Da bi lakše objasnili, iskoristićemo primer neuredjene liste.

<ul>

<li>Prva</li>

<li>Druga</li>

<li>Treća</li>

<li>Četvrta</li>

<li>Peta</li>

<li>Šesta</li>

<li>Sedma</li>

</ul>

Zamislimo da od svih stavki u listi (Prva, Druga, Treća, itd.) želimo da u zelenu boju obojimo samo četvrtu stavku, tj. stavku sa tekstom Četvrta. Kako bi to mogli da uradimo? Iz onoga što smo do sada obradili, u obzir dolazi samo ul li+li+li+li {color;green;}.

To nećemo koristiti. Zašto? Postoji mnogo elegantnije rešenje u vidu pseudo selektora nth-child()

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn