CSS/Pseudoklassid ja pseudoelemendid
Viis peamist pseudoklassi
[muuda]Pseudoklassid võimaldavad lisada erinevaid efekte mingitele selektoritele või nende osadele. Pseudoklassid on tõenäoliselt kõige populaarsem CSS-i kasutusvaldkond, mida tunnevad ka need, kes muidu oma leheküldel absoluutselt CSS-i abi ei kasuta. Pseudoklassi üldkuju on järgmine:
selektor:pseudoklass { ... }
Pseudoklasse on viis:
- link - külastamata link
- visited - külastatud link
- hover - element kursori ülelibistamise ajal
- active - element hiirevajutuse ajal
- focus - element on valitud (näiteks vormielement, mis ootab teksti sisestamist)
Näiteks võime omistada elemendi 'a' pseudoklassidele järgmised stiilid:
a:link { color: blue }
a:visited { color: gray }
a:hover { color: red }
a:active { color: purple }
Sellisel juhul on külastamata lingid sinised ja külastatud hallid. Kui hiirekursoriga üle lingi libistada, siis muutub see punaseks, kui hiire esimene klahv lingil olles alla vajutada, siis muutub värv violetseks.
Järjekord loeb!
[muuda]Järgnevalt väärib meie tähelepanu asjaolu, et pseudoklasside deklareerimise järjekord on oluline. Kui eelpool toodud järjekorda muuta, siis hakkab lehekülg töötama teistviisi:
a:link { color: blue }
a:active { color: purple }
a:hover { color: red }
a:visited { color: gray }
Sellise järjestuse puhul on tulemuseks see, et külastamata lingid on endiselt sinised ja lingist kursoriga üle käies muutub see punaseks, aga hiire klahvi vajutamise peale ei juhtu midagi. Hoopis imelik on aga lugu külastatud linkidega, sest need on ja jäävad halliks ükskõik kui palju sa ka nende peal kursorit ei liigutaks ega klikiks.
Mõnikord on selline linkide käitumine just see, mida sa soovid, aga enamasti siiski mitte. Seega järjekord on tähtis, aga miks just selline, ja miks käituvad elemendid toodud järjestuste puhul just nõnda?
Põhjus on selles, et element võib üheaegselt kuuluda mitmesse erinevasse pseudoklassi. Näiteks võib link olla üheaegselt külastamata ning kursori all. Kuna pseudoklasside "kaalud" on võrdsed, siis jääb sellises olukorras peale see pseudoklass, mis on deklareeritud viimasena. Vaadeldes viimast näidet näeme nüüd, et link ei muutunud violetseks (purple) kordagi seetõttu, et alati kui lingi peale vajutati asus hiir lingi kohal ning 'hover'-iga määratud stiil kirjutas 'active'-stiili üle. Samuti, kui link oli juba külastatud, siis varjutas see nii 'hover' kui 'active' staatuse, sest oli deklareeritud viimasena.
Seega tasub meeles pidada järjekord 'link', 'visited', 'hover' ja 'active', ehk lühendatult LVHA, ehk mnemooniliselt "LoVe, HA!". Klasside 'link' ja 'visited' omavaheline järjekord pole tegelikult oluline, sest link ei saa üheaegselt olla külastatud ja külastamata, aga on lihtsalt loogilisem kirjeldada külastamata link enne. Pseudoklass 'focus' võiks asuda aga kõige lõpus - kui muidugi soovitakse, et näiteks tekstikast oleks teksti sisestamise ajal punase taustaga hoolimata sellest, kas kursor on selle kohal või mitte.
Pseudoklasside kombineerimine
[muuda]Pseudoklasse võib ka omavahel kombineerida määramaks täpselt mis juhtub, kui element kuulub korraga mitmesse klassi.
a {
text-decoration: none;
font-size: large;
font-weight: bold
}
a:link { color: green }
a:link:hover { color: olive }
a:link:hover:active { color: #0f0 }
a:visited { color: red }
a:visited:hover { color: purple }
a:visited:hover:active { color: #ff0 }
Siin määratakse esmalt, et kõik lingid, hoolimata olekust, on allajoonimata, suured ja rasvased. Järgmised deklaratsioonid määravad, et kui link on külastamata, siis on ta sinine, kursori all oliivikarva ja klikkimise ajal neoonroheline. Külastatud lingid on punased, kursori all violetsed ning klikkimise ajal erk-kollased.
Pseudoklasside määramine mitte-linkidele
[muuda]CSS lubab määrata pseudoklasse 'hover', 'active' ja 'focus' kõigile elementidele (mitte ainult linkidele). Kahjuks ei toeta mitmed laialt levinud brauserid (eeskätt Microsoft Internet Explorer) seda võimalust. 'focus'-t muidugi lingile määrata ei saagi, aga see selleks.
Näiteks võib määrata, et tekstilõik muutub hiirega üle libistades kontrastsemaks, klikkides aga negatiivseks:
p {
color: #222;
background-color: #ddd;
}
p:hover {
color: #000;
background-color: #fff;
}
p:active {
color: #fff;
background-color: #000;
}
NB! Efekti nägemiseks kasuta mõnda uuemat brauserit näiteks perekondadest Mozilla, Opera, Konqueror või Safari.
Pseudoelemendid: esimene rida ja esimene täht
[muuda]CSS annab võimaluse määrata eraldi stiil tekstilõigu esimesele reale ja / või tähele. Selleks saab kasutada pseudoelemente first-line ja first-letter:
p:first-line { font-variant: small-caps }
p:first-letter { font-size: xx-large }
Näites määratakse, et esimene on kirjutatud trükitähtedega ning esimene täht on ülejäänutest märgatavalt suurem (oletades, et elemendi 'p' kirjusuurus on 'medium'). Stiili rakendamise tulemus võib olla umbes selline:
Tihtipeale soovitakse aga, et esimene täht oleks nn Drop Cap. Selleks puhuks sobib suurepäraselt parameeter float:
p:first-letter {
font-size: xx-large;
float: left;
}
Tulemus:
Ka pseudoelementide puhul tegelikult järjekord oluline pole, sest pseudoelemendid on erineva kaaluga ning kui tekst kuulub korraga mitmesse pseudoelementi, siis saab määravaks spetsiifilisem element. Kahjuks ei kehti see aga Microsoft Internet Exploreri puhul, mis tõlgendab neid võrdse kaaluga olevateks ning arvestab seda, mis määratud viimasena. Näiteks järgmine stiilileht ei anna IE-ga vaadates soovitavat tulemust:
div:first-letter {
color: blue;
font-size: xx-large;
}
div:first-line { color: red }
Siin on elemendi esimene rida punane ning esimene täht suur ja samuti punane. Õnneks on sellele probleemile väga lihtne lahendus - kirjeldada kõigepealt 'first-line' ja alles siis 'first-letter':
div:first-line { color: red }
div:first-letter {
color: blue;
font-size: xx-large;
}