HTML-sivulla voi olla myös tilanteita ja rakenteita, joita ei näy dokumentin varsinaisessa HTML-kielisessä tekstissä, mutta joita voidaan silti tyylitellä CSS:llä.

Pseudoluokat

Luokat ovat HTML-elementteihin class-attribuutilla lisättäviä määritteitä, joita voidaan käyttää tietyssä asemassa olevien elementtien tyylittelyyn.

Pseudoluokat ovat puolestaan elementin tiloja, jotka eivät näy itse HTML-tekstissä, mutta joihin voidaan silti viitata CSS-säännöissä. Ne ovat siis olemassaolevan elementin poikkeuksellisia tiloja, kuten hiiren päällä oleminen, kohdistus tai ensimmäisenä oleminen. Valitsimissa pseudoluokka merkitään kaksoispisteellä : muodossa:

valitsin:pseudo-luokka {
    ominaisuus: arvo;
}

Linkit

Linkeille, eli <a>-tageille on HTML-sivulla neljä erityistä tilaa. Tilat ja niitä vastaavat pseudoluokat ovat:

• Normaalitila (:link) – linkki sivulle, jolla ei ole vielä vierailtu
• Valinta (:hover) – hiiren kursori on viety linkin päälle
• Vierailtu (:visited) – linkin osoittamalla sivulla on jo käyty (ts. sivu löytyy selaimen historiasta)
• Kohdistettu (:focus) – linkillä on kohdistus joko hiiren klikkauksen tai tabulaattori-näppäimen painalluksen vuoksi
• Aktiivinen (:active) – linkin valinta parhaillaan meneillään hiiren klikkauksella (tai näppäimistöltä)

Käytettävyyden kannalta on usein tärkeää määritellä kaikkien neljän tilan ulkoasu erilaisiksi.

Linkkien ulkoasua CSS-säännöillä määriteltäessä on tärkeää huomata näiden pseudoluokkia käyttävien valitsimien keskinäinen järjestys. Huomattavaa on, että a:hover-sääntö on syytä tulla a:link- ja a:visited-sääntöjen jälkeen, sillä muuten se ei voi tulla voimaan, koska toisen saman arvoiset säännöt yliajavat sen. Samoin valitsinta a:active käyttävän säännön on syytä olla a:hover-säännön jälkeen, sillä hiirellä klikatessa hiiri on myös samalla linkin päällä. Myös :focus on syytä olla ennen :active-pseudoluokkaa, sillä aktiivisella linkillä on aina kohdistus.

a:link {
    color: blue;
}
a:visited {
    color: red;
}
a:hover {
    color: green;
}
a:focus {
    color: brown;
}
a:active {
    color: gold;
}

Huomio: Yksityisyyssyistä :visited-pseudoluokalla käytettävien CSS-sääntöjen määrää on selaimissa rajoitettu erittäin voimakkaasti. Vain seuraavia ominaisuuksia voidaan säätää :visited-pseudoluokkaa valitsimessa käyttävissä säännöissä: color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, 'column-rule-color, fill ja stroke.

Mieti, miksi!

Muut elementit

Edellä mainittuja linkeille hyödyllisiä pseudoluokkia voidaan soveltuvin osin käyttää myös muilla elementeillä. Näistä :hover ja :active toimivat kaikille elementeille ja :focus niille elementeille, joille voidaan antaa kohdistus, kuten <input>-elementeille.

CSS3 määrittelee lisäksi melko suuren joukon muitakin pseudoluokkia:

input:invalid {background-color: #faa; border: 1px solid red;}
input:valid {background-color: #afa; border: 1px solid green;}
input:checked + label {color: green;}
input:required {border: 1px solid black; border-left: 10px solid black;}
input:disabled {box-shadow: 0 0 2px blue;}
li:nth-child(3n+2) {background-color: #ffa;}
li:not(.valittu) {color: gray;}
li:nth-child(3n+2) {background-color: #ffa;}

<input type="number" min="0" max="5" value="8">
<input type="checkbox" checked><label>rastiruutu</label>
<input type="text" placeholder="osoite" required>
<input type="text" placeholder="lempijuoma" disabled>
<ul>
    <li>yksi</li>
    <li>kaksi</li>
    <li>kolme</li>
    <li class="valittu">neljä</li>
    <li>viisi</li>
    <li class="valittu">kuusi</li>
    <li>seitsemän</li>
    <li>kahdeksan</li>
</ul>
</ul>

Pseudoelementit

Pseudoluokat olivat jo olemassa olevan elementin erityisessä tilanteessa esiintyviä ominaisuuksia, joiden avulla elementin voi CSS-sääntöjä varten valita. Pseudoelementit puolestaan ovat elementtejä, joita ei todellisessa HTML-tekstissä ole, mutta joita selain osaa käsitellä itsenäisen elementin tavoin. Tällaisia ovat esimerkiksi jonkin elementin sisällä sen ensimmäinen kirjain.

Valitsimissa pseudoelementtiä merkitään kahdella kaksoispisteellä :: muodossa:

valitsin::pseudo-elementti {
    ominaisuus: arvo;
}

Pseudoelementit:

Pseudoelementit ::before ja ::after ovat kyseisen todellisen elementin sisälle alkuun ja loppuun tulevat elementit, joiden sisällöksi tulee CSS-säännöissä content-ominaisuuden arvona oleva teksti tai merkinnällä url('kuvan_osoite.png') ilmoitettu kuva.

Pseudoelementti ::first-letter käsittelee kyseisen lohkoelementin ensimmäistä kirjainta kuin todellista HTML-elementtiä ja ::first-line tekee saman lohkoelementin ensimmäiselle riville.

::selection puolestaan tarkoittaa elementin sisältä käyttäjän valitsemaa (“maalaamaa”) osuutta. Firefox ei tue suoraan ::selection-pseudoelementtiä vaan se täytyy huomioida erikseen prefixillä “-moz-” merkityllä vastineella ::-moz-selection.

    .laatikko {
        border: 1px dotted black;
    }
    .laatikko::before {
        content: "Laatikon alku";
        background-color: #faa;
    }
    .laatikko::after {
        content: "Laatikon loppu " url('ghost-penguin.png') " ja kummitus";
        display: block;
        background-color: #aaf;
        text-align: right;
    }
    p::first-line {
        font-weight: bold;
    }
    p::first-letter {
        font-size: 265%;
        color: red;
        margin: 0 0.2em 0.2em 0;
        padding: 0;
        display: block;
        float: left;
    }
    p::selection {
        background-color: #ffa;
    }
    p::-moz-selection {
        background-color: #ffa;
    }

<div class="laatikko">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor consequat lorem eget vestibulum. Aenean sodales magna et mauris elementum, quis facilisis lacus scelerisque. Etiam egestas lectus non tellus facilisis malesuada. Pellentesque faucibus maximus aliquet. Etiam sed nunc nec ante cursus accumsan.
</div>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor consequat lorem eget vestibulum. Aenean sodales magna et mauris elementum, quis facilisis lacus scelerisque. Etiam egestas lectus non tellus facilisis malesuada. Pellentesque faucibus maximus aliquet. Etiam sed nunc nec ante cursus accumsan.
</p>
<p>
    Vestibulum consectetur eros ac porttitor viverra. Mauris id pulvinar nunc. Quisque non consectetur nisi. Nullam a rutrum libero, quis fermentum diam. Praesent eu mauris a ligula consequat faucibus vel sit amet erat. In maximus sapien eget est mollis, nec sagittis orci placerat. Vestibulum lorem sem, rutrum quis enim ac, commodo eleifend libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non lacinia justo.
</p>

Hiiren osoitin

Myös hiiren osoittimen ulkoasua, sen ollessa valitun elementin päällä, voidaan vaihtaa CSS-ominaisuudella cursor. Tyyppejä on useita ja lisäksi kursoriksi voi määrätä myös oman kuvan url(kuva.png)-muotoisella arvolla. Käytettävissä olevia tyyppejä voi kokeilla esimerkiksi W3Schoolsin kokeilusivulla.

Valmiilla arvoilla osoittimen lopullinen tyyli määräytyy käyttöjärjestelmän käytössä olevista osoittimista.

.laatikko {min-height: 50px; min-width: 100px; display: inline-block; text-align: center; padding: 10px 0;}
.eka {background-color: #faa; cursor: pointer;}
.toka {background-color: #ffa; cursor: wait;}
.kolmas {background-color: #afa; cursor: help;}
.neljas {background-color: #aaf; cursor: move;}
.viides {background-color: #aff; cursor: copy;}
.kuudes {background-color: #faf; cursor: grab;}
.kuudes:active {background-color: #faf; cursor: grabbing;}
.seitsemas {background-color: #aaa; cursor: url(html5-pieni.png), auto;}

<div class="laatikko eka">Pointer</div>
<div class="laatikko toka">Wait</div>
<div class="laatikko kolmas">Help</div>
<div class="laatikko neljas">Move</div>
<div class="laatikko viides">Copy</div>
<div class="laatikko kuudes">Grab</div>
<div class="laatikko seitsemas">Html5</div>