4.5. Pseudoklassid

Pseudoklassid võimaldavad lisada erinevaid efekte mingitele selektoritele või nende osadele. Käesolevas materjalis piirdume pseudoklasside kõige vanema rakendusega - erinevate stiilide määramisega viidetele vastavalt nende staatusele (külastamata, külastatud, aktiivne). Pseudoklassi üldkuju on järgmine:

selektor:pseudoklass { omadus: väärtus }

Seega viitemärgendi <a> puhul võime defineerida viite eri olekud näiteks nii:

a:link { color: blue }
a:visited {color: gray }
a:active { color: purple }

Pseudoklassidest oli juba juttu, nüüd siis räägime "päris" klassidest... Klass on meetod, mis võimaldab

1. defineerida ühe märgendi tarvis mitu erinevat stiili ja kasutada neid siis koos klassikuuluvuse äranäitamisega (näiteks võivad samas dokumendis olla kasutusel klassid "punane lõik" ja "sinine lõik" - mõlemad kasutavad <p>-märgendit)
2. defineerida märgendist sõltumatuid stiile, mida saab kasutada mistahes märgendiga või ka iseseisvalt.

Eespoolmainitud punase ja sinise lõigu saame defineerida nii:

p.punane {color: red}
p.sinine {color: blue}

Nende kasutamine käib nii:

<p>Tavaline must tekst</p>
<p class="punane">punane tekstilõik</p>
<p class="sinine">sinine tekstilõik</p>
<p>Jälle tavaline tekst</p>

NB! Korraga saab kasutada vaid üht klassi!

Sõltumatu klassi näitena võime defineerida klassi "alarm", mis kuvab kollase suurtähtedes teksti punasel taustal. Definitsioon on järgmine:

.alarm { color: yellow; background: red; text-transform: uppercase }

<p class="alarm"> api api! Se olen mina Nodsu api api!</p>
<h1 class="alarm">Häire!</h1>

<p>Avariiolukorras vajutage <span class="alarm">Häire</span>-nupule.</p>

p#SuurSinine { font-size: x-large; color: blue }

<p id="SuurSinine">Suur ja sinine lõik</p>

<h2 id="SuurSinine">See ei ole suur ja sinine</h2>

*#PaksPunane {font-weight: bold; color: red }