CSS-valitsimet

Valitsin (selector) kertoo, mihin elementteihin tyylisääntö osuu. Valitsimet ovat CSS:n tärkein yksittäinen asia: kun osaat kohdistaa säännön juuri oikeisiin elementteihin, et tarvitse ylimääräisiä luokkia etkä style-attribuutteja.

Oppimistavoitteet

Tämän luennon jälkeen sinun pitäisi osata:

käyttää käsitteitä äitielementti, lapsi, jälkeläinen, esi-isä ja sisarus;
valita elementtejä nimen, luokan ja tunnisteen perusteella;
käyttää yhdistelmävalitsimia E F, E > F, E + F ja E ~ F;
muotoilla linkit pseudoluokilla :link, :visited ja :hover oikeassa järjestyksessä;
käyttää pseudoluokkia :first-child, :last-child ja :root.

Mitä tällä luennolla ei käsitellä

Tämä luento käsittelee valitsinten perusteet. Ominaisuudet ja arvot, kaskadi, yksiköt ja värit ovat CSS-luennolla, mediakyselyt omalla luennollaan ja sivun asettelu omallaan.

Attribuuttivalitsimet, loput pseudoluokat, pseudoelementit ja laskurit löytyvät TIEA2120 Web-käyttöliittymien ohjelmointikurssin CSS-valitsimet-materiaalista. Tällä kurssilla niitä ei tarvita.

Harjoittele pelaamalla

Valitsimia voi harjoitella CSS Diner -pelillä. Sen ensimmäiset tasot käsittelevät juuri tämän luennon valitsimia, ja loput menevät jatkomateriaalin puolelle.

1. Käsitteitä

Valitsimet perustuvat siihen, että dokumentti muodostaa puun: elementit ovat sisäkkäin ja peräkkäin. Seuraavat käsitteet tarvitaan, jotta valitsimista voi puhua täsmällisesti.

Äitielementti, vanhempi (parent): Elementti, jonka sisällä tarkasteltava elementti välittömästi on.
Lapsielementti (child): Välittömästi tarkasteltavan elementin sisällä oleva elementti.
Jälkeläinen (descendant): Mikä tahansa elementin sisällä oleva elementti, kuinka syvällä tahansa. Jokainen lapsi on jälkeläinen, mutta jokainen jälkeläinen ei ole lapsi.
Esi-isä, esivanhempi (ancestor): Elementti, jonka jälkeläinen tarkasteltava elementti on.
Sisarelementti (sibling): Elementit ovat sisaruksia, jos niillä on sama äitielementti.
Edeltävä ja seuraava sisarus (preceding/following sibling): Edeltävä sisarus on dokumentissa ennen tarkasteltavaa elementtiä, seuraava sen jälkeen.

Kaikki käsitteet yhdessä esimerkissä:

<article>
  <h2>Otsikko</h2>
  <p>Kappale, jossa on <strong>korostus ja <a href="/">linkki</a></strong>.</p>
</article>

Esimerkin elementtien suhteet.
Väite	Pitää paikkansa?
`p` on `article`-elementin lapsi	Kyllä
`a` on `article`-elementin lapsi	Ei. Se on jälkeläinen, muttei lapsi
`a` on `article`-elementin jälkeläinen	Kyllä
`a` on `strong`-elementin lapsi	Kyllä
`article` on `a`-elementin esi-isä	Kyllä
`h2` ja `p` ovat sisaruksia	Kyllä, molempien äiti on `article`
`h2` on `p`-elementin edeltävä sisarus	Kyllä
`h2` ja `strong` ovat sisaruksia	Ei. Niillä on eri äitielementti

2. Perusvalitsimet

Yksinkertaiset valitsimet.
Valitsin	Osuu	Esimerkki
`*`	Jokaiseen elementtiin	`* { box-sizing: border-box; }`
`E`	Jokaiseen elementtiin, jonka nimi on E	`p { line-height: 1.6; }`
`.luokka`	Elementteihin, joiden `class`-attribuutissa on tämä sana	`.varoitus { color: red; }`
`#tunniste`	Elementtiin, jonka `id` on tämä	`#valikko { ... }`
`E.luokka`	E-elementteihin, joilla on tämä luokka	`p.varoitus { ... }`
`E#tunniste`	E-elementtiin, jolla on tämä tunniste	`p#tarkein { ... }`
`.eka.toka`	Elementteihin, joilla on molemmat luokat	`.tarkea.uusi { ... }`

Valitsimia voi luetella pilkulla erotettuna, jolloin sama sääntö koskee kaikkia:

h1, h2, h3 {
  font-family: Verdana, Arial, sans-serif;
}

Aloita elementeistä, lisää luokkia vasta tarvittaessa

Muotoile ensin elementit sellaisenaan: p, h1, ul. Lisää luokka vasta, kun jokin yksittäinen kohta poikkeaa muista. Näin tyylitiedosto pysyy lyhyenä eikä HTML täyty luokista.

3. Yhdistelmävalitsimet

Yhdistelmävalitsimilla kerrotaan, missä suhteessa elementtien on oltava toisiinsa. Merkki valitsimien välissä ratkaisee.

Neljä yhdistelmävalitsinta.
Valitsin	Nimi	Osuu elementtiin F, joka on
`E F`	Jälkeläisvalitsin	E-elementin jälkeläinen, kuinka syvällä tahansa
`E > F`	Lapsivalitsin	E-elementin välitön lapsi
`E + F`	Vierusvalitsin	E-elementin välittömästi seuraava sisarus
`E ~ F`	Yleinen sisarvalitsin	E-elementin seuraava sisarus, vaikka välissä olisi muita

Välilyönti on merkitsevä

p strong ja p.strong ovat aivan eri asioita. Ensimmäinen osuu strong-elementteihin kappaleen sisällä, toinen kappaleisiin, joilla on luokka strong. Sama koskee merkkejä >, + ja ~: niiden ympärillä olevat välilyönnit ovat vapaaehtoisia, mutta pelkkä välilyönti tarkoittaa jälkeläisvalitsinta.

Huomaa, että sisarvalitsimet katsovat vain eteenpäin. CSS:ssä ei ole valitsinta, joka osuisi edeltävään sisarukseen.

4. Pseudoluokat

Pseudoluokka valitsee elementin sen tilan tai sijainnin perusteella, eli jonkin sellaisen asian perusteella, jota ei näy HTML-koodissa attribuuttina. Pseudoluokka kirjoitetaan kaksoispisteellä valitsimen perään.

4.1 Linkkien pseudoluokat

Linkin tilat.
Pseudoluokka	Osuu, kun
`:link`	Linkkiä ei ole vielä avattu
`:visited`	Linkissä on käyty
`:hover`	Osoitin on linkin päällä

a:link    { color: #0645ad; }
a:visited { color: #663366; }
a:hover   { color: #ffffff; background-color: #0645ad; }

Järjestys on pakollinen

Kirjoita säännöt järjestyksessä :link, :visited, :hover. Muussa järjestyksessä myöhemmät säännöt kumoavat aiemmat, koska niillä on sama spesifisyys, eikä :hover silloin näy käydyillä linkeillä. Muistisääntö on LoVe HAte.

Älä poista kohdistusreunusta

Selain piirtää valittuna olevan elementin ympärille reunuksen, jotta näppäimistöllä liikkuva näkee, missä hän on. Merkintä outline: none tekee sivusta näppäimistöllä käyttökelvottoman. Jos oletusreunus ei miellytä, korvaa se omalla näkyvällä tyylillä äläkä poista sitä.

4.2 Sijainnin mukaan

Sijaintiin perustuvat pseudoluokat.
Pseudoluokka	Osuu elementtiin, joka
`:first-child`	on äitinsä ensimmäinen lapsi
`:last-child`	on äitinsä viimeinen lapsi

li:first-child { font-weight: bold; }
li:last-child  { font-style: italic; }

Näiden etu tavalliseen luokkaan verrattuna on se, että muotoilu seuraa rakennetta. Kun listaan lisätään alkio tai siitä poistetaan sellainen, muotoilu siirtyy automaattisesti oikealle alkiolle. Luokkaa käytettäessä se pitäisi muistaa siirtää käsin.

4.3 Dokumentin juuri: `:root`

:root osuu dokumentin uloimpaan elementtiin, joka HTML-dokumentissa on aina html-elementti. Sitä käytetään koko sivua koskevien oletusarvojen asettamiseen.

:root {
  font-size: 100%;     /* kunnioittaa käyttäjän selaimeensa asettamaa kokoa */
  color-scheme: light dark;
}

Sama olisi mahdollista kirjoittaa myös valitsimella html. :root on kuitenkin vakiintunut tapa, ja se on aavistuksen spesifisempi, koska pseudoluokka lasketaan kuin luokka ja elementin nimi ei.

5. Valitsin ja spesifisyys

Kun useampi sääntö osuu samaan elementtiin, voittaja ratkeaa valitsimen spesifisyydellä: tunniste voittaa luokan ja luokka voittaa elementin nimen. Pseudoluokka lasketaan kuin luokka.

Spesifisyys tämän luennon valitsimilla.
Valitsin	Spesifisyys
`*`	0, 0, 0
`li`	0, 0, 1
`ul li`	0, 0, 2
`.varoitus`	0, 1, 0
`li:first-child`	0, 1, 1
`#valikko a`	1, 0, 1

Yhdistelmävalitsimien merkit >, + ja ~ eivät itsessään vaikuta spesifisyyteen. Tarkemmin aiheesta CSS-luennon luvussa 3.2.

6. Tavallisimmat virheet

Virheet, jotka toistuvat useimmin.
Virhe	Seuraus
Ylimääräinen välilyönti: `p .varoitus` kun tarkoitettiin `p.varoitus`	Sääntö osuu kappaleen sisällä oleviin elementteihin, ei kappaleeseen itseensä
Piste luokan edestä puuttuu: `varoitus { }`	Selain etsii elementtiä nimeltä `varoitus`, jota ei ole
Risuaita tunnisteen edestä puuttuu: `tarkein { }`	Sama ongelma
Linkin pseudoluokat väärässä järjestyksessä	`:hover` ei toimi käydyillä linkeillä
`outline: none` kohdistuksen poistamiseksi	Sivua ei voi käyttää näppäimistöllä
Puolipiste puuttuu edellisen määrityksen lopusta	Myös seuraava määritys jää huomiotta

Tarkista valitsin kehittäjätyökaluilla

Jos sääntö ei osu, valitse elementti kehittäjätyökaluilla ja katso oikean laidan sääntöluettelosta, näkyykö sääntösi siellä lainkaan. Jos ei näy, valitsin ei osu; jos näkyy yliviivattuna, jokin toinen sääntö voittaa. Katso HTML5-luennon luku 19.1.

7. Lisätietoa

CSS Diner, valitsinten harjoituspeli.
MDN: CSS selectors.
Kurssin CSS-luento, jossa käsitellään ominaisuudet, kaskadi, yksiköt ja värit.
Valitsimet, jatkomateriaali (TIEA2120): attribuuttivalitsimet, loput pseudoluokat, pseudoelementit ja laskurit.

Käyttäjien kommentit