Näennäisluokat

• Linkin näennäisluokat
• Ulkoasun näennäisluokat

Näennäis- eli pseudoluokat ovat tyyliluokkien erikoistapauksia. Havainnollisin esimerkki asiasta on linkkien värin muuttaminen tapauskohtaisesti vierailemattoman ja vieraillun linkin välillä. Esimerkiksi vieraillun linkin väri on ollut erilainen kuin linkki, josta avautuvaa dokumenttia ei ole käyty katsomassa. Tapauskohtaisten värien määrittäminen ei ole mahdollista tyylien aliluokkien avulla, joten siihen joudutaan käyttämään näennäisluokkia. Käytettäessä näennäisluokkaa tyylin nimi koostuu tyylin nimestä ja näennäisluokan nimestä, jotka erotetaan toisistaan kaksoispisteellä (:). Seuraavassa esimerkissä käytetään a-elementin näennäisluokkaa visited.

a:visited {/* vierailtu linkki */
color: purple;
background-color: transparent;
}

Tyylin näennäisluokan käyttö ei aiheuta mitään lisäyksiä varsinaiseen XHTML-dokumenttiin, kuten esimerkiksi tyylin aliluokkien käyttö aiheutti.

Näennäisluokkia voidaan käyttää myös asiayhteyden mukaan toimivina ja niitä voidaan käyttää myös aliluokkien yhteydessä. Seuraavissa esimerkeissä tarkastellaan kumpaakin tapausta. Ensimmäisessä esimerkissä poistetaan kuvan ympäriltä kehys, jonka jotkin selaimet tekevät automaattisesti vierailemattomana linkkinä toimivan kuvan yhteydessä.

a:link img {
border: none;
}

Toisessa esimerkissä kirjasimen kokoa on suurennettu vierailemattomissa linkeissä, jotka kuuluvat aliluokkaan tarkea.

a.tarkea:link {
font-size:larger;
}

Linkin näennäisluokat

Linkin eli a-elementin näennäisluokat ovat varmasti yksi tarpeellisimmista näennäisluokkien käyttökohteista. Linkkien näennäisluokkien avulla voidaan dokumentin vieraillut, vierailemattomat ja aktiiviset linkit erottaa toisistaan esimerkiksi erilaisilla värimäärityksillä. Seuraavassa esimerkissä esitellään linkkien erilaiset näennäisluokat. Ensimmäisenä on vierailemattoman linkin näennäisluokka link, jonka ominaisuudet saa a-elementin sisällä oleva teksti. Toisena on vieraillun linkin näennäisluokka visited, jonka ominaisuudet a-elementin sisällä olevat teksti saa, jos linkin kautta on vierailtu toisella sivulla. Kolmantena esimerkissä on aktiivisen linkin näennäisluokka active, jonka ominaisuudet a-elementin sisällä oleva teksti saa, jos käyttäjä on valinnut linkin aktiiviseksi esimerkiksi hiirellä. Viimeisenä esimerkissä on näennäisluokka hover, jonka ominaisuudet tulevat voimaan vietäessä hiiren kohdistin linkin päälle.

a:link {/* vierailematon linkki */
color: blue;
background-color: transparent;
}
a:visited {/* vierailtu linkki */
color: purple;
background-color: transparent;
}
a:active {/* aktiivinen linkki */
color: red;
background-color: transparent;
}
a:hover {/* Hiiren kohdistin on linkin päällä */
color: white;
background-color: black;
}

Ulkoasun näennäisluokat

Ulkoasuun liittyvien näennäisluokkien avulla voidaan muuttaa XHTML-dokumentin ulkoasua joidenkin erikoistapausten osalta. Esimerkiksi kappaleen ensimmäinen kirjain voidaan suurentaa tai kappaleen ensimmäinen rivi voidaan sisentää muuta kappaletta sisemmäksi. Ulkoasun näennäisluokat ovat ainoastaan keinoja saada XHTML-dokumentin ulkoasusta "hienompi", mutta mitään rakenteellista merkitystä ulkoasun näennäisluokilla ei ole.

Seuraavassa esimerkissä ensimmäisen rivin muotoilemiseen on käytetty kapiteelikirjaimia. Kappaleen ensimmäistä riviä voidaan muotoilla first-line-näennäisluokan avulla. Ensimmäisellä rivillä tarkoitetaan tässä yhteydessä kappaleen ensimmäistä riviä, joka näkyy selainikkunassa. Selainikkunan koon muuttuessa sivu päivitetään uudestaan, koska ensimmäisen rivin pituus saattaa muuttua. Ensimmäisen rivin näennäisluokkaa voidaan käyttää ainoastaan kappaletasoisten elementtien kanssa. Ensimmäisen rivin näennäisluokan ominaisuuksia voidaan muuttaa ominaisuuksien font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height ja clear avulla.

p:first-line {
font-variant: small-caps;
}

Seuraavassa esimerkissä kappaleen ensimmäinen kirjain on muutettu 200 prosenttiseksi oletuskirjasimen kokoon verrattuna. Ensimmäisen kirjaimen ominaisuuksia päästään muuttamaan first-letter-näennäisluokan avulla.

Ensimmäisen kirjaimen näennäisluokan ominaisuuksia voidaan muuttaa ominaisuuksien font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear, margin, padding, border ja float avulla.

p:first-letter {
font-size: 200%;
}

Näennäisluokkia voidaan käyttää asiayhteyden mukaan toimivina ja niitä voidaan käyttää myös aliluokkien kanssa.

Seuraavassa kuvassa on käytetty ulkoasun näennäisluokkien yhteydessä olleita esimerkkejä dokumentin ulkoasun muotoilemiseen.