CSS

CSS-TYYLEIHIN LIITTYVÄÄ KOULUTUSTA VUONNA 2025!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! Koulutuksen järjestää asiantuntijasi Koulutus- ja konsultointipalvelu KK Mediat.

CSS:n valitsimet

CSS-valitsin (engl. selector) määrittää, mihin HTML-elementteihin tyylisääntö kohdistuu. Valitsimien avulla voit muuttaa esimerkiksi värejä, fontteja tai asettelua vain tietyille elementeille, HTML-luokille tai tilanteille (esim. hiiri päällä) HTML-dokumentissa.

Oppaan edeltävissä osissa on tähän asti käytetty pääosin yksinkertaisia tyyppivalitsimia, jotka kohdistuvat suoraan HTML-elementin nimeen (kuten body, p tai h1). Jotta CSS:stä saisi parhaan hyödyn irti, on tärkeää oppia käyttämään myös tarkempia valitsimia, kuten luokka-, ID- ja attribuuttivalitsimia.

Valitsinten syntaksi

Seuraavassa taulukossa esitellään yleisimmät valitsimet, jotka kuuluvat CSS1- ja CSS2-spesifikaatioihin. Sitten käymme läpi jokaisen valitsintyypin esimerkkien avulla.

Yleisimmät CSS-valitsimet
Syntaksi Tyyppi Kuvaus
* Universaali valitsin Tyylisääntö kohdistuu kaikkiin elementteihin
E Tyyppivalitsin Tyylisääntö kohdistuu elementtiin E
E F Jälkeläisvalitsin Tyylisääntö kohdistuu kaikkiin elementteihin F, jotka ovat elementin E jälkeläisiä (sisällä)
E>F Lapsivalitsin Tyylisääntö kohdistuu kaikkiin elementteihin F, joiden vanhempana on elementti E
E,F Ryhmittäjä Tyylisääntö kohdistuu elementteihin E ja F
E+F Sisarusvalitsin Tyylisääntö kohdistuu kaikkiin elementteihin F, joita edeltää elementti E
E.a Luokkavalitsin Tyylisääntö kohdistuu kaikkiin elementteihin E, joiden class-attribuutilla on arvo a
E#a ID-valitsin Tyylisääntö kohdistuu elementtiin E, jonka id-attribuutilla on arvo a
E[a] Attribuuttivalitsin Tyylisääntö kohdistuu kaikkiin elementteihin E, joilla on attribuutti a (attribuutin nimestä ja arvosta riippumatta)
E[a="b"] Attribuuttivalitsin Tyylisääntö kohdistuu kaikkiin elementteihin E, joilla on attribuutti a ja attribuutin arvo on yhtä kuin b
E[a~="b"] Attribuuttivalitsin Tyylisääntö kohdistuu kaikkiin elementteihin E, joilla on attribuutti a (välilyönnillä erotettu arvojoukko) ja attribuutin arvo on yhtä kuin b.
E[a|="b"] Attribuuttivalitsin Tyylisääntö kohdistuu kaikkiin elementteihin E, joilla on attribuutti a ja arvojoukko alkaa merkkijonolla b
E::after Pseudoelementti Elementtiä E seuraa sisältö, joka ilmoitetaan ominaisuudella content.
E::before Pseudoelementti Elementtiä E edeltää sisältö, joka ilmoitetaan ominaisuudella content.
E::first-letter Pseudoelementti Tyylisääntö kohdistuu elementin E ensimmäiseen kirjaimeen
E::first-line Pseudoelementti Tyylisääntö kohdistuu elementin E ensimmäiseen riviin
E:first-child Pseudoluokka Tyylisääntö kohdistuu elementin E ensimmäiseen jälkeläiseen (elementin sisällä)
E:link Pseudoluokka Tyylisääntö kohdistuu kaikkiin elementteihin E, jotka ovat vierailemattomia linkkejä. Vain a-elementti
E:visited Pseudoluokka Tyylisääntö kohdistuu kaikkiin elementteihin E, jotka ovat vierailtuja linkkejä. Vain a-elementti
E:lang(a) Pseudoluokka Tyylisääntö kohdistuu kaikkiin elementteihin E, joilla lang-attribuutin arvo on a
E:focus Dynaaminen pseudoluokka Tyylisääntö kohdistuu kaikkiin elementteihin E, joilla on fokus (esim. lomakekenttä)
E:hover Dynaaminen pseudoluokka Tyylisääntö kohdistuu kaikkiin elementteihin E, joiden päällä hiiri on.
E:active Dynaaminen pseudoluokka Tyylisääntö kohdistuu kaikkiin elementteihin E, jotka ovat aktiivisia (esim. maalattu hiirellä)

Uudemmat CSS3- ja CSS4-määrittelyt tarjoavat useita uusia valitsimia kuten :nth-child(), :not(), :has() ja :is().

Universaali valitsin

Universaali valitsin kohdistaa tyylisäännöt kaikkiin HTML-dokumentin elementteihin. Se merkitään *merkinnällä, jota seuraa normaali määrittelylohko. Universaali valitsin toimii ikään kuin "kaikki elementit" -sääntönä.

Alla olevassa esimerkissä universaalin valitsin asettaa oletusfontin kaikille elementeille. 



* {
    font-family: Verdana; 
}

Universaali valitsin vaikuttaa kaikkiin elementteihin, mutta tarkemmat valitsimet voivat ylikirjoittaa sen avulla asetetut tyylit CSS:n cascade- ja periytymissääntöjen mukaisesti. 



* {
    font-family: Verdana;
}
h1 {
    font-family: serif;
}

Universaali valitsin voidaan yhdistää muihin CSS-valitsimiin, jolloin tyylit kohdistuvat tarkemmin. Esimerkiksi seuraava sääntö kohdistaa tyylin kaikkiin div-elementin sisällä oleviin elementteihin: 



div * {
    font-family: serif;
}

Tyyppivalitsin ja ryhmittelyvalitsin

Tyyppivalitsin kohdistaa tyylisäännön kaikkiin tietyn HTML-elementin esiintymiin dokumentissa. Esimerkiksi h2-valitsin kohdistuu kaikkiin toisen tason otsikoihin.

Ryhmittelyvalitsin mahdollistaa saman tyylin määrittämisen useille eri elementeille kerralla. Elementit erotetaan pilkulla.

Alla olevassa esimerkissä h2-valitsin asettaa mustan tekstivärin kaikille h2-elementeille. Ryhmittelyvalitsin h1, h3, h4 asettaa sinisen värin kaikille näille otsikkotasoille. 



h2 {
    color:black;
}

h1,h3,h4 {
    color:blue;
}

ID-attribuuttivalitsin

ID-valitsin (engl. ID selector) kohdistaa tyylin HTML-elementtiin, jolla on tietty id-attribuutin arvo. On tärkeää huomata, että koska ID on tarkoitettu yksilölliseksi tunnisteeksi, samaa ID-arvoa voi käyttää vain kerran verkkosivulla.

ID-valitsimelle on kaksi yleistä kirjoitustapaa:

E#a
Tyyli kohdistuu elementtiin E, jonka id-attribuutilla on arvo a
#a
Tyyli kohdistuu mihin tahansa elementtiin, jonka id-attribuutilla on arvo a

Jos kappale-elementillä on ID-arvo 'testi', sitä vastaava CSS-määrittely voisi olla seuraava:" 


p#testi{
    text-decoration:underline;
}

/* myös tämä olisi täysin oikein: */
#testi {
    text-decoration:underline;
}

Class-attribuuttivalitsin

Class-valitsin (engl. class selector) kohdistaa tyylin kaikkiin HTML-elementteihin, joilla on sama class-attribuutin arvo. Class-valitsimen voi kirjoittaa kahdella tavalla:

E.a
Tyyli kohdistuu elementtiin E, jonka class-attribuutilla on arvo a
.a
Tyyli kohdistuu kaikkiin elementteihin, joiden class-attribuutilla on arvo a

Samaa class-arvoa voi käyttää useissa elementeissä, jolloin niihin saadaan sama tyyli.

Esimerkki: 



...
p.romeo {color:red;}
p.julia {color:blue;}

/* vaihtoehtoisesti valitsimet voisi ilmaista myös näin: */
.romeo {color:red;}
.julia {color:blue;}

...

<p class="romeo">Romea sanoo jotain</p>
<p class="julia">...ja Julia vastaa</p>
<p class="romeo">Romea puhuu lisää</p>
<p class="romeo">...ja lisää</p>

Jälkeläis-, lapsi- ja sisarvalitsimet

Sijaintiin perustuvat CSS-valitsimet kohdistavat tyylinsä elementtien sijainnin perusteella. Valitsin aktivoituu vain, jos elementti on toisen elementin sisällä (jälkeläinen), sen suora lapsi (lapsivalitsin), tai seuraa sitä välittömästi samassa tasossa (sisarvalitsin).

Seuraavassa esimerkissä CSS:n avulla tyylitellään eri vuorosanojen puhujien dialogit: 


....
/* perustyyli */ 
p {color: #0033FF; }

/* kaikki body-elementin sisässä olevat div-elementit, joilla on class-arvo vuorosanat */
body div.vuorosanat {background-color:#FFFF99; }

/* kaikki p-elementit, joilla on class romeo ja joiden vanhempana on div-elementti class-arvolla vuorosanat */
div.vuorosanat > p.romeo {border-color:red;border-style:solid;border-width:2px;}

/* kaikki julian vuorosanat, joita edeltää romeo */
p.romeo + p.julia {color:#33CC33;}
...
<p>Dialogia: </p> 
<div class="vuorosanat"> 
  <p class="romeo">Romea sanoo jotain </p> 
  <p class="julia">...ja Julia vastaa</p> 
  <p class="julia">ja Julia jatkaa.</p> 
  <p class="romeo">Romea puhuu lisää</p> 
  <p class="romeo">...ja lisää</p> 
</div>
...

CSS:n pseudovalitsimet

CSS-tyylit kohdistuvat tavallisesti HTML-dokumentin elementteihin, jotka näkyvät dokumenttipuussa. Pseudovalitsimien (engl. pseudo-selectors tai pseudo-classes) avulla tyylit voidaan kohdistaa elementin tiloihin tai osiin, joita ei voi valita pelkän HTML-rakenteen perusteella.

Pseudovalitsimet mahdollistavat monipuolisemmat tyylimäärittelyt ilman HTML-rakenteen muutoksia.

Tyypillisiä pseudovalitsimien kohteita ovat esimerkiksi:

CSS:n pseudoluokat kohdistuvat elementin tilaan ja kirjoitetaan yhdellä kaksoispisteellä. Esimerkiksi a:hover kohdistuu hyperlinkin tilaan.

Pseudolementit kohdistuvat elementin osiin, ja niiden eteen kirjoitetaan kaksi kaksoispistettä. Esimerkiksi p::before. Huom! CSS:n vanhemmissa versioissa pseudoelementeissä käytettiin myös yhtä kaksoispistettä eroittimena.

Hyperlinkin tila - :link ja :visited pseudovalitsimet

Hyperlinkki (ankkuri) merkitään HTML-kielessä a-elementin avulla. Pseudovalitsimien avulla voidaan määrittää linkin ulkoasu eri tilanteissa, esimerkiksi sen mukaan, onko käyttäjä jo vieraillut linkissä.

a:link
Valitsin kohdistaa tyylin linkkeihin, joiden href-attribuutissa oleva osoite ei ole vielä avattu käyttäjän selaimessa.
a:visited
Valitsin kohdistaa tyylin linkkeihin, joiden href-attribuutissa oleva osoite on jo aiemmin avattu käyttäjän selaimessa.

Seuraavassa esimerkissä linkit esitetään ilman alleviivausta. Ei-vierailtuihin linkkeihin käytetään sinistä väriä, ja vierailtuihin linkkeihin punaista.



a {
  text-decoration:none;
}

a:link {
 color:blue;
}  

a:visited {
 color:red;
}

Käyttäjän vuorovaikutus elementin kanssa - :hover,:focus ja :active pseudovalitsimet

Käyttäjän vuorovaikutusta voidaan CSS:ssä tarkastella kolmen pseudovalitsimen avulla:

E:hover
Hiiri tai muu osoitin on elementin päällä.
E:focus
Elementillä on fokus (ts. siihen voidaan syöttää tekstiä); lähinnä lomakekentät.
E:active
Elementti on aktivoitunut, esim. käyttäjä on juuri klikannut sitä hiirellä tai vapauttanut painikkeen).

Alle olevassa esimerkissä linkin väri muuttuu ja siihen lisätään alleviivaus kun hiiri on hyperlinkin päällä. Vastaavasti syötekentän taustaväri vaihtuu, kun sillä on fokus. Lisäksi painikkeeseen lisätään sininen reunus, kun se on aktiivinen. 



a:hover {
  color:#CCFF99;text-decoration:underline;
}

input[type=text]:focus {
  background-color:#CCFF99; padding:10px;
}

input[type=button]:active {
  border:2px solid blue;
}

Sisällön rakenneosat - :first-line ja first-letter pseudovalitsimet

:first-letter pseudovalitsimella voi kohdistaa tyylin elementin ensimmäiseen kirjaimeen. Sitä käytetään esimerkiksi korostamaan kappaleen aloituskirjainta (anfang). Esimerkki: 



p:first-letter {
   font-size:2em;
}

Pseudovalitsimen first-line avulla voidaan kohdentaa tyyli elementin ensimmäiseen riviin. Ensimmäinen rivi määritellään selainikkunan (nk.viewport) perusteella. Esimerkki: 



p.first-line{ 
  text-transform:uppercase;
}

Suhde muihin elementteihin - ::before, ::after ja :first-child

::before ja ::after -pseudovalitsimilla voidaan lisätä dynaamista sisältöä elementin eteen tai taakse. Lisättävä sisältö määritellään CSS-ominaisuudella content. Alla olevassa esimerkissä tulostusmediaa varten luodaan ylätunniste, joka lisätään dokumentin alkuun: 



@media print {
body::before 
 { 
   content: "Copyright Koulutus- ja konsultointipalvelu KK mediat © 2025 \A 
   Aineiston kopioiminen ja hyödyntäminen henkilökohtaisen käytön ulkopuolella ilman lisenssiä on kielletty. ";
   display: block;
   margin-top: 2em;
   text-align:left;
  }
}

:first-child -pseudovalitsimella tyylimäärittely kohdistuu jonkin elementin ensimmäiseen lapseen. Esimerkiksi jos div-elementin ensimmäinen lapsi on p-elementti, siihen kohdistuu seuraava tyyli:


div > p:first-child {
  text-indent: 10px;
}

Artikkelin tiedot

Otsikko: CSS:n valitsimet

Kuvaus: Opi kohdistamaan tyylit tarkasti. Esittelyssä tyyppivalitsimet, luokka- ja ID-valitsimet, attribuuttivalitsimet sekä pseudovalitsimet.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: