CSS 2.1 sisältää joukon vain tulostukseen vaikuttavia valitsimia. Ne on esitelty tulostusmuotoiluja käsittelevällä sivulla.
@-säännöt eli at-säännöt eivät varsinaisesti ole valitsimia vaan eräänlaisia sääntöjä. @-säännöt tulee aina sijoittaa ensimmäiseksi CSS-koodiin ennen kaikkia muita muotoiluja ja valitsimia. @-sääntöjen sisälle voi myös sisällyttää @import- ja @charset-sääntöjä lukuun ottamatta muita valitsimia ja muotoiluja:
@sääntö {
body { color:black; }
}
@charset-säännöllä voidaan määrittää ulkoisen tyylitiedoston käyttämä merkistö. Säännön toimivuudesta eri selaimilla ei ole tietoa.
Esimerkiksi:
@charset "UTF-8";
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
@import-säännön avulla CSS:ään voi tuoda mukaan ulkoisen CSS-tiedoston. @importia voi käyttää myös ulkoisessa CSS-tiedostossa.
@importin avulla liitetyt muotoilut voi kohdistaa halutessaan tietyille mediatyypeille. Tällöin eri mediatyypit lisätään ulkoisen tiedoston osoitteen perään ja erotetaan toisistaan pilkulla. Osoite voidaan ilmoittaa pelkkien lainausmerkkien sisällä, mikäli mediatyyppiä ei ilmoiteta. Mikäli mediatyyppi ilmoitetaan, osoite tulee kirjoittaa muodossa url("osoite").
Mediatyypit
Esimerkiksi:
@import "mansikka.css";
Tai:
@import url("mansikka.css") tv, screen;
Tämä muotoilu toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
@media kertoo, mille laitteelle halutut muotoilut on suunnattu. Muut laitteet jättävät ne huomiotta.
@media-määreen perään lisätään haluttu mediatyyppi.
Esimerkiksi alla on käytetty @media-sääntöä siten, että halutut muotoilut vaikuttavat vain silloin, kun sivua tarkastellaan näkövammaisten käyttämillä laitteilla.
@media braille, embossed {
color:black;
background:#eee;
}
@page-sääntö on esitelty tulostusta käsittelevällä sivulla.
Tämä valitsin toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Universaalin valitsimen avulla määritetyt muotoilut vaikuttavat joka ikiseen sivulla olevaan elementtiin, ellei niille ole erikseen määritetty omia muotoiluja. Universaali valitsin on aina pelkkä tähti.
* { muotoilut }
Tämä valitsin toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Tyyppivalitsimen avulla määritetään muotoiluja sivun kaikille tietyntyyppisille elementeille, esimerkiksi kappalejaoille. Jos siis tyyppivalitsimen avulla muotoilee kappalejakoa (<p>), muotoilut vaikuttavat sivun kaikkiin kappalejakoihin.
Tyyppivalitsin onkin yleinen valitsin, jolla säädetään yleensä sivun elementtien perustyyli. Muilla valitsimilla voidaan tehdä yksittäisten elementtien muotoiluihin tarkennuksia.
elementti { muotoilut }
Alla olevassa esimerkissä värjätään sivun kaikkien blockquote-elementtien taustat vaaleanharmaiksi.
blockquote { background:#eee; }
Tämä valitsin toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Jälkeläisvalitsin on muuten sama kuin tyyppivalitsin, mutta sen avulla määritetään jonkin elementin sisällä olevan toisen elementin muotoilut, esimerkiksi divin sisällä olevan kappalejaon. Jälkeläisvalitsinta käytettäessä määrittäviä sisäkkäisiä elementtejä voi olla rajattomasti.
elementti1 elementti2 { muotoilut }
elementti1 elementti2 elementti3 elementti4 elementti5 { muotoilut }
Alla olevassa esimerkissä on määritetty divin sisällä olevan kappalejaon tausta vaaleanharmaaksi.
div p { background:#eee; }
Alla edellistä esimerkkiä on viety pidemmälle: divin sisällä olevan kappalejaon sisällä olevan korostuksen tausta määritetään tummemman harmaaksi.
div p strong { background:#ccc; }
Tämä valitsin ei toimi IE 6:lla, mutta kylläkin IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Lapsivalitsimen avulla voidaan määrittää tietyn elementin saavan halutut muotoilut, jos se on suoraan toisen määritetyn elementin sisällä. Esimerkiksi divin (<div>) sisällä oleva korostus (<strong>) voidaan määrittää saamaan keltaisen taustan. Se ei kuitenkaan saa keltaista taustaa, mikäli se on divin sisällä vielä jonkin toisen elementin (esimerkiksi kappalejaon) sisällä.
Elementti1 > elementti2 { muotoilut }
Käytännössä:
div > strong { background:yellow; }
XHTML:
<div> <strong>Tämä saa keltaisen taustan,</strong> <p><strong>mutta tämä ei</strong>,</p> sillä yllä oleva ei ole suoraan divin vaan divin alla olevan kappalejaon sisällä. </div>
Tämä valitsin ei toimi IE 6:lla, mutta kylläkin IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Vierekkäisvalitsimen avulla voidaan määrittää muotoiluja siten, että elementti B saa muotoilut vain, mikäli se on välittömästi elementin A jälkeen.
A + B { muotoilut }
Käytännössä:
h1 + p { color:#ccc; }
XHTML:
<h1>Otsikko</h1> <p>Vierekkäisvalitsin värjää tämän tekstin harmaaksi,</p> <p>mutta tätä ei, sillä tämä ei ole välittömästi otsikon (<h1>) jälkeen.</p>
Tämä valitsin toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Luokkavalitsimen avulla voidaan yhdistää haluttuja muotoiluja kaikkiin niihin sivun elementteihin, joissa on vastaava class-attribuutti.
.luokka { muotoilut }
Yllä määritetyt muotoilut vaikuttavat kaikkiin alla oleviin XHTML-elementteihin:
<span class="luokka">Hei</span> <p class="luokka">Hei 2</p> <div class="luokka">Hei 3</div> <hr class="luokka" />
Luokkavalitsimen eteen voi lisätä universaalin valitsimen tähden, mutta tämä ei muuta toimintaa. Alla olevan esimerkin kaksi erilaista merkintätapaa ovat molemmat yhtä oikein ja aiheuttavat saman lopputuloksen.
.luokka { muotoilut }
*.luokka { muotoilut }
Luokkavalitsimen voi myös tarkentaa koskemaan vain tiettyjä elementtejä, joilla on haluttu luokkamääritys.
span.luokka1 { color:red; } p.luokka1 { background:#eee; } .luokka1 { color:#444; }
XHTML:
<span class="luokka1">Yllä määritetty CSS-muotoilu värjää tämän tekstin punaiseksi.</span> <p class="luokka1">Tämän kappaleen tausta on harmaa.</p> <div class="luokka1">Kaikkien muiden luokkaan</div> <textarea class="luokka1" cols="10" rows="10"> "luokka1" kuuluvien</textarea> <strong>elementtien teksti on harmaata.</strong>
Tämä valitsin toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Id-valitsimen avulla määritetään muotoiluja yksittäiselle elementille, jolla on tietty id-attribuutin arvo. Yksi id voi esiintyä yhdellä sivulla vain kerran, eikä id saa alkaa numerolla. Kahdella tai useammalla elementillä ei siis saa olla samaa id:tä.
Luokkavalitsimen tapaan myös id-valitsimen voi määrittää yleisesti tai tarkasti tietylle elementille. Id:tä tarvitaan myös sivuankkureita käytettäessä.
elementti#id { muotoilut }
#id { muotoilut }
Käytännössä:
div#mansikka { color:red; } #peruna { background:#eee; }
XHTML:
<div id="mansikka">Tämä teksti on punaista.</div> <p id="peruna">Tämän tausta on harmaa.</p>
Id-valitsimen eteen voi lisätä universaalin valitsimen tähden, mutta tämä ei muuta toimintaa. Alla olevan esimerkin kaksi erilaista merkintätapaa ovat molemmat yhtä oikein ja aiheuttavat saman lopputuloksen.
#id { muotoilut }
*#id { muotoilut }
Nämä valitsimet toimivat osittain IE 6:lla ja IE 7:llä ja kokonaan FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Pseudovalitsimiksi kutsutaan valitsimia, jotka alkavat kaksoispisteellä ja jotka lisätään yleensä halutun elementin määrittelyn perään:
elementti:pseudovalitsin { muotoilut }
Esimerkiksi alla on määritetty divin sisällä oleva teksti muuttumaan punaiseksi, kun divin päälle menee hiirellä:
div:hover { color:red; }
Pseudovalitsimiin voi yhdistellä kaikkia valitsimia, esimerkiksi luokkavalitsimia, id-valitsimia, tyyppivalitsimia ja jälkeläisvalitsimia. Käytännössä mikään valitsin ei ole kielletty, eivät edes toiset pseudovalitsimet. Pseudovalitsin voi esiintyä myös yksinään.
Esimerkiksi:
elementti.luokka:pseudovalitsin { muotoilut }
.luokka:pseudovalitsin { muotoilut }
elementti#id:pseudovalitsin { muotoilut }
#id:pseudovalitsin { muotoilut }
elementti1:pseudovalitsin { muotoilut }
elementti1 elementti2:pseudovalitsin { muotoilut }
elementti1 > elementti2:pseudovalitsin { muotoilut }
elementti1 + elementti2 { pseudovalitsin }
:pseudovalitsin { muotoilut }
elementti1:pseudovalitsin:pseudovalitsin2 { muotoilut }
Käytännössä esimerkiksi:
div.mansikka:hover { color:red; }
.mansikka:hover {color:red; }
div#mansikka:hover { color:green; }
#mansikka:hover { color:green; }
div:hover { color:yellow; }
div span:hover { color:orange; }
div > p:hover { color:blue; }
div + p:hover { color:blue; }
:visited { color:black; }
div:active:hover { color:black; }
Sivuilla näkyvien hyperlinkkien ulkoasuun voi vaikuttaa pääasiassa kahdella valitsimella, :linkilla ja :visitedilla. Näiden lisäksi käytetään usein :activea ja :hoveria.
Tämä valitsin toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
:linkillä määritetään sellaisten linkkien muotoilut, joissa ei ole vierailtu. Toimivuuden kannalta molemmat alla esitetyt vaihtoehdot ovat yhtä hyviä ja aiheuttavat saman lopputuloksen. A:llinen versio on kuitenkin yleisempi.
a:link { muotoilut }
:link { muotoilut }
Tämä valitsin toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
:visitedillä määritetään jo vierailtujen linkkien muotoilut. Toimivuuden kannalta molemmat alla esitetyt vaihtoehdot ovat yhtä hyviä ja aiheuttavat saman lopputuloksen. A:llinen versio on kuitenkin yleisempi.
a:visited { muotoilut }
:visited { muotoilut }
Tämä valitsin toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
:active-valitsimella voidaan määrittää elementin ulkoasua silloin, kun se on aktiivinen. Esimerkiksi linkki on aktiivinen silloin, kun sitä klikataan.
a:active { muotoilut }
Nämä valitsimet eivät toimi IE 6:lla ja IE 7:llä, mutta kylläkin FF 2:lla, Opera 9:llä sekä Safari 3:lla.
:after-valitsimen avulla voidaan määrittää jotakin sisältöä halutun elementin jälkeen. :before-valitsimen avulla puolestaan sijoitetaan sisältöä ennen haluttua elementtiä. Internet Explorer 6 ei tue näitä valitsimia.
Molemmissa tapauksissa sisältö ilmaistaan content-muotoilulla. Sen arvo voi olla jokin seuraavista:
| none | Ei mitään. |
|---|---|
| normal | Oletus, yleensä sama kuin "none". |
| "tekstiä" | Tulostaa lainausmerkkien välissä olevan tekstin. |
| url(osoite) | Tulostaa sulkujen välissä olevan osoitteen sisällön, esimerkiksi kuvan. |
| counter(nimi) | Tulostaa juoksevan numeroinnin, jonka tunniste on "nimi". Juoksevasta numeroinnista lisää listojen muotoilun yhteydessä. |
| open-quote | Tulostaa lainauksen aloittavan lainausmerkin. |
| close-quote | Tulostaa lainauksen lopettavan lainausmerkin. |
| no-open-quote | Ei tulosta mitään, mutta kasvattaa asteella lainauksen syvyyttä. Merkitään lainauksen alkuun. |
| no-close-quote | Ei tulosta mitään, mutta kasvattaa asteella lainauksen syvyyttä. Merkitään lainauksen loppuun. |
Määritetään musiikkitiedosto esimerkki.mp3 ilmaantumaan divin lataamisen jälkeen.
div:after { content: url(musiikki.mp3); }
Määritetään divin jälkeen tulostumaan kuva.
div:after { content: url(kuva.png); }
Määritetään divin jälkeen tulostumaan teksti "Olen laama!" (ilman lainausmerkkejä).
div:after { content: "Olen laama!"; }
Mikäli tulostettavassa tekstissä on lainausmerkkejä, niiden eteen tulee kirjoittaa \-viiva:
div:after { content: "\"Olen laama!\", hän sanoi."; }
Tämä valitsin ei toimi IE 6:lla, mutta kylläkin IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
:first-child -valitsimen avulla voidaan määrittää muotoiluja elementille A, joka on ensimmäinen elementti emon B sisällä.
A:first-child { muotoilut }
XHTML:
<B> <A>tämä on B:n ensimmäinen lapsi</A> <A>tämä on B:n toinen lapsi</A> <A>tämä on B:n kolmas lapsi</A> </B>
Alla oleva muotoilu määrittää strong-elementin tekstin punaiseksi, mikäli se on emonsa ensimmäinen elementti.
strong:first-child { color:red; }
XHTML:
<div>
<strong>Tämä teksti on punaista.</strong>
<strong>Tämä taas ei.</strong>
</div>
Tämä valitsin toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
:first-letter -valitsimella voidaan määrittää halutun elementin sisällä olevan tekstin ensimmäiselle kirjaimelle muotoiluja.
elementti:first-letter { muotoilut }
Alla määritellään kappaleen ensimmäinen kirjain punaiseksi.
p:first-letter { color:red; }
Tämä valitsin toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
:first-line -valitsimella voidaan määritellä halutun elementin sisällä olevan tekstin ensimmäiselle riville muotoiluja.
elementti:first-line { muotoilut }
Alla määritellään kappaleen ensimmäinen rivi punaiseksi.
p:first-line { color:red; }
Tämä valitsin ei toimi IE 6:lla, IE 7:llä ja Opera 9:llä, mutta kylläkin FF 2:lla sekä Safari 3:lla.
:focus-valitsimella määritetään muotoiluja elementille, joka on kohdistettuna. Esimerkiksi linkki on kohdistettuna silloin, kun sitä on painettu, mutta painamisen jälkeen ei olla ehditty painaa vielä mitään muuta.
elementti:focus { muotoilut }
Tämä valitsin toimii osittain IE 6:lla ja kokonaan IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
:hover-valitsimella tietylle elementille määritellyt muotoilut näkyvät silloin, kun hiiri on viety sen päälle. :hoveria käytetään paljon etenkin linkkien ulkoasun määrityksessä, mutta sitä voi käyttää muuallakin. Internet Explorer 6 ei kuitenkaan tue :hoveria muualla kuin linkkien ulkoasun määrityksen yhteydessä.
elementti:hover { muotoilut }
Tämä valitsin ei toimi IE 6:lla tai IE 7:llä, mutta kylläkin FF 2:lla, ja Opera 9:llä. Muotoilu ei toimi Safari 3:lla.
:lang-valitsimella voidaan kohdistaa muotoilut mihin tahansa elementtiin, joka on tietynkielinen. Elementin kieli ilmaistaan lang-attribuutilla.
Esimerkiksi:
p:lang(english) { color:red; }
<p lang="english">This text is red.</p>
<p lang="finnish">Tämä teksti ei ole punaista.</p>
Tämä valitsin ei toimi IE 6:lla, mutta kylläkin IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Tämä valitsin ei toimi IE 6:lla, mutta kylläkin IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Attribuuttivalitsimella määritetään muotoiluja mille tahansa elementille, jolla on haluttu attribuutti.
[attribuutti] { muotoilut }
Käytännössä:
[class] { color:red; }
XHTML:
<div class="punainen"> Tämä teksti on punaista. </div> <div id="vihrea">Tämä taas ei.</div> <p class="keltainen">Ja tämä taas on.</p>
Attribuuttivalitsinta voi myös tarkentaa koskemaan vain tiettyjä elementtejä, joilla on haluttu attribuutti. Esimerkiksi alla oleva muotoilu koskee vain div-elementtejä, joilla on attribuutti class. Se ei vaikuta esimerkiksi kappalejakoihin tai tekstikenttiin, vaikka niillä olisikin class-attribuutti.
div[class] { color:red; }
Tämä valitsin ei toimi IE 6:lla, mutta kylläkin IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Attribuutti ja sen arvo -valitsin on tarkempi versio yleisestä attribuuttivalitsimesta. "Attribuutti ja sen arvo" ottaa huomioon itse attribuutin lisäksi myös sen, mikä arvo sille on annettu.
Käytännössä:
[class="mansikka"] { color:yellow; }
XHTML:
<div class="mansikka"> Tämä teksti on keltaista.</div> <p class="mansikka">Samoin tämä.</p> <div class="mustikka">Mutta tämä ei.</div>
Valitsinta voi myös kohdistaa tarkemmin vain tietyissä elementeissä oleviin attribuutteihin. Esimerkiksi alla oleva muotoilu vaikuttaa vain sellaisiin linkkeihin, jotka on toteutettu <a>-tagilla.
a[href="kana.png"] { color:red; }
Tämä valitsin ei toimi IE 6:lla, mutta kylläkin IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
"Attribuutti ja yksi sen arvo" on muuten sama kuin "attribuutti ja sen arvo", mutta "attribuutti ja yksi sen arvo" sallii XHTML-koodissa elementin attribuutille useamman arvon, joista vain yhden tarvitsee vastata määrityksiä.
Käytännössä:
[class~="tatti"] { color:red; }
XHTML:
<div class="kantarelli vahvero tatti"> Tämä teksti on punaista.</div> <p class="karvarousku tatti limanuljaska"> Samoin tämä.</p> <p class="kantarelli hapero kaapa">Vaan tämä ei.</p>
Tämä valitsin ei toimi IE 6:lla, mutta kylläkin IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
"Attribuutti ja sen ensimmäinen arvo" määrittää elementille muotoiluja, mikäli sillä on yhdysviivalla erotettuja attribuutin arvoja, joista ensimmäinen vastaa määritettyä:
Käytännössä:
[lang|="fi"] { color:red; }
XHTML:
<div lang="fi-FI">
Tämä teksti on punaista.</div>
<p lang="en-UK">Tämä ei.</p>
Tämä valitsin toimii IE 6:lla, IE 7:llä, FF 2:lla, Opera 9:llä sekä Safari 3:lla.
Usealle CSS-valitsimelle voi määrittää samat muotoilut yksinkertaisesti erottamalla valitsimet toisistaan pilkulla:
valitsin1, valitsin2, valitsin3 { muotoilut }
Esimerkiksi alla määritetään divin #mansikka sekä kaikkien taulukoiden ja listojen sisällä olevien linkkien teksti punaiseksi.
div#mansikka, table, li a:link { color:red; }