Pseudo-luokat (pseudo-class)

Osaat jo tehdä linkkejä sivuillesi, mutta niiden oletus-ulkoasu saattaa olla epäsopiva muuhun designiin nähden. Onneksi niitä voi tyylitellä, sillä <a> on tagi siinä missä muutkin.

a  {
color: red;
background-color: yellow;
}

Linkit ovat kuitenkin hieman monimutkaisempia, sillä niillä on eri (neljä kpl) tilaa: Normaalitila, Vierailtu ja tila, jossa hiiri linkin päällä, mutta ei vielä napsauteta ja harvemmin käytetty aktiivinen tila. Nyt kun teet a-tagille tyylin, käytetään sitä kaikissa näissä tiloissa. Tarvitaan pseudo-luokkia, joilla päästään stailaamaan tilatkin.
Kommentti Huomaa esimerkissä CSS-kommentit: /**/, niiden väliin kirjoitetut asiat eivät näy sivulla. HTML-koodissa kommentit kirjoitetaan: <!–Kommentti–>

/* linkki normaalitilassa */
a:link {
color: #FF0000;
}

/* linkki, jota on napsautettu */
a:visited {
color: #00FF00;
}

/* hiiri linkin päällä. Pitää olla aina linkin ja visited:n jälkeen toimiakseen. Hoverin voi nykyään muuten laittaa mille tahansa elementille, esim. p:hover, h1:hover {background-color: yellow;} on täysin mahdollinen */
a:hover {
color: #FF00FF;
}

/* aktiivinen linkki, eli linkki jota juuri napsautetaan*/
a:active {
color: #0000FF;
}

Muita pseudo-luokkia

Tutustu myös seuraaviin. (Olen laittanut vain yhden esimerkin kustakin, sovella omiin tarkoituksiisi!)

not Käänteinen valinta, jossa sääntöä sovelletaan kaikkiin kappaleisiin jotka eivät kuulu luokkaan punainen
p:not(.punainen) {
background-color: green;
}

nth-child Valitse ryhmästä yksi tai useampi elementti. Tee vaikkapa ihan tavallinen lista:

<ul class="nthlista">
<li>koira</li>
<li>kissa</li>
<li>aasi</li>
<li>kukko</li>
</ul>

nth:n avulla voit kohdistaa listan ekaan (1) kohtaan säännön jossa sen taustasta tulee pinkki ja säännön, joka tekee joka toisesta rivistä (parillinen=even, pariton=odd) punaisen valkoisella kirjoituksella:

.nthlista>li:nth-child(1){
background-color: pink;
}

.nthlista>li:nth-child(even){
color: white;
background-color: red;
}

(Huom. Tämän voisi tehdä myös ul>li:nth-child(1)eli ilman luokkaa.) Samoin listan ekan kohdan olisi saanut muotoiltua myös first-child:lla:
ul>li:first-child {
background-color: pink;
}

Muita mahdollisia pseudo-luokkia voit tutkia lisää esim Haaga-Helian sivulta.