CSS Jelena

Pseudo-klase Radovanović
Šta su 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 selektorima
koje definišu "običan" izgled, a onda da se za isti selektor navede CSS za pseudo-
klasu.
Podsetnik

Selektori i
Kombinovanje selektora
Za šta se koriste?

• Da definišu specijalno stanje elementa. Npr.

• Stil elementa kada se pređe mišem preko njega
• Različiti stilovi za posećene i neposećene linkove 
• Stil elementa kada je u fokusu
Sintaksa
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 (:hover) postale prilično korišćene

Pseudo-klasa :hover menja izgled 
elementa iznad koga se nalazi miš. 
Pomoću CSS-a smo definisali izgled 
elementa, a onda smo pseudo-klasom 
definisali šta se (i kako) na elementu 
menja kada korisnik pređe mišem preko njeg
a.
Primer
Pseudo-klase i CSS klase

• Pseudo-klase mogu da se kombinuju sa CSS klasama.

Kada se pređe mišem preko linka

koji pripada klasi highlight on
menja boju
Hover na <div> element
Hover na <div> element
Prelaskom miša preko <div> elementa
prikazuje se <p> element

Link ka još jednom primeru - combinator +

 CSS pseudo-klase prema mestu elementa
• Ove pseudo-klase modifikuju selektor, tako da se onda primenjuje na element, zavisno od toga na
kom mestu u nadređenom (kontejnerskom) elementu se taj elemenat nalazi
 :first-child pseudo-klasa
:first-child pseudo-klasa modifikuje selektor, tako da se onda primenjuje na prvi element unutar nadređenog
elementa (first child – prvo dete nadređenog elementa)
bilo koji <p> element koji je first
child bilo kog elementa

prvi <i> element u svim <p>

elementima

svi <i> elementi (u <p>

elementima koji su first child
drugih elemenata)
Primer
kako da na lak način napravimo tabelu u
kojoj je svaki drugi red drugačije obojen
CSS pseudo-klase elemenata forme
• Ove pseudo-klase su pre svega zamišljene kao modifikacija izgleda elemenata forme
na osnovu njihovog trenutnog "stanja", odnosno korisnikovih aktivnosti
 Pitanja
???
Hvala na pažnji!