Yleistä

CSS systeemin perustoimintaperiaate on siinä, että elementeille sovitetaan CSS-ominaisuuksia tiettyjen periaatteiden mukaan. Selaimen tulee tunnistaa elementit. Lukuun ottamatta suorien tyyliattribuuttien käyttöä selain luo elementtitunnisteista ikään kuin tunnistettavan hahmon. Perustoimintaperiaatetta nimitetäänkin hahmontunnistukseksi (pattern matching). CSS:ssä ja dokumentissa, jossa sitä käytetään tulee olla toisiaan vastaavia pareja.

Jos esitysasu määritellään erillisillä CSS-tiedostoilla, tiedostot toimivat eräänlaisina esitysasua koskevina tietokantoina (ne vastaavat käsinkirjoitettuja tietokantoja). Ulkopuolisten CSS-tiedostojen käyttämistä voi verrata siihen, että sivun asiasisältö haetaan tietokannasta. CSS mahdollistaa siten esitysasun dynaamisen päivittämisen. Upotetussa CSS:ssä "tietokanta" kulkee asiakirjan mukana, joten se ei toteuta dynaamista päivitystä muuten kuin siten, että upotettu CSS haetaan palvelinpuolen skriptillä jostakin erillistiedostosta.

Jotta "CSS-tietokannassa" ja dokumentissa olevat parit löydettäisiin, selain tarvitsee ns. valitsimia (selectors). Ne nimensä mukaisesti valitsevat elementin tai elementit, joille CSS-ominaisuudet liitetään. Tällä sivulla käsittelen yleisimmät valitsimet ja niihin liittyvät tärkeimmät hahmonsovitussäännöt (matching rules). Alkuperäistermejä ovat mm. universal selector, (element) type selector, class selector, id selector, pseudo-class selectors ja pseudo-element selectors.

W3C: CSS2: 5 Selectors; 5.1 Pattern matching.
Muita sivustoja: Keijo Kortelainen: Valitsimet.

Esimerkkien ensimmäinen määrittelytapa on kaikkein yleisin, mitä voi ajatella. Seuraavassa esimerkissä on myös muutamia muita HTML-asiakirjoille tarkoitettuja yleisvalitsimen käyttötapoja ():

*{color:red;} /* ensimmäinen merkki on ns. jokerimerkki, joka on tässä yhteydessä välttämätön - jokerimerkki on yleinen tapa eri tietokonesovelluksissa */
*.muu {color:blue;} /* tässä tapauksessa jokerimerkin voi jättää pois, sillä määrittelyssä on mukana piste ja pisteen jälkeen on tällä kertaa ns. luokkavalitsin, joka selitetään edempänä */
.muu {color:blue;} /* merkitys sama kuin edellä */

Kuten edeltävistä esimerkeistä voi havaita valitsimet liittyvät ns. kuvauslohkoihin (sanan määrittely). Kun kuvauslohkoon liitetään jokin valitsin, saadaan sääntö (rule), esim:

*
{font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
text-align:justify;}

Seuraava käsitekaavio selvittää vielä termien välisiä suhteita (* tarkoittaa sekä yleisvalitsinta että mitä tahansa mahdollista valitsinta; kuvauslohko voi sisältää useita kuvauksia):

Englanninkielisessä tekstissä sääntöjä nimitetään myös sanoilla rule sets ja statements (=käsky, lause; ks. sanan määrittely). Tarkasti ottaen kyse on käskylohkokoista, jolloin englanninkielisissäkin teksteissä pitäisi kirjoittaa statement-blocks or block-statements). Valitsimiin liittyvät yksinkertaiset säännöt or sääntöjoukot kertovat 1)  kohdistettavan or kohdistettavien elementtien tunnisteet sekä 2) ominaisuudet, jotka niille annetaan eli ominaisuuksien kuvauslohkon ja siinä olevat kuvaukset. Näiden perusteella selain esittää dokumentin halutulla tavalla.

Elementtityyppivalitsin

Yleisin mahdollinen määrittely on useimmiten liian kattava ja käytännössä yleisvalitsimellakin on aina jokin tarkennin. Elementtityyppitunnisteilla on seuraavaksi ylempi painoarvo. Oikeastaan hahmontunnistusperiaatekin alkaa vasta elementtityyppivalitsimista, sillä selain joutuu etsimään yksittäisiä kohteita. Siksi perusvalitsimena voidaan pitää yksinkertaista ns. elementtityyppivalitsinta (element type selector or vain type selector).

Elementtityyppivalitsimissa tunnisteena toimii tietyn elementin nimi. Esim. seuraavassa on elementtiä H2 koskeva sääntö ():

h2 {color:#660033; background-color:#ff3; border:#660033 1px solid; font-size:17px}

CSS-säännöissä ja dokumentissa olevien elementtimerkkausten sisällä olevat elementtien nimet muodostavat toisiaan vastaavan parin.

Muista, että XML-asiakirjoissa on merkitystä sillä, käytetäänkö pieniä vai isoja kirjaimia. CSS-säännöissä ja XML-dokumentissa olevilla elementtityyppitunnisteilla täytyy olla sama kirjainkoko.

Luokka- ja id-valitsimilla (kuten edempänä käsiteltävillä attribuuttivalitsimilla) on suurempi painoarvo kuin elementtityyppivalitsimilla. HTML-spesifikaatioiden mukaan id-attribuutin nimen tulisi olla dokumenttikohtaisesti uniikki. Id-valitsinta voitaisiin kutsuu oikeastaan uniikkivalitsimeksi, sillä valintakriteeri perustuu (periaatteessa) yksilöivään eli uniikkiin tunnisteeseen (unique identifier). Attribuuttia id kutsutaan englanninkielisissä teksteissä myös sanoilla fragment identifier (= katkelmatunniste, fragmenttitunniste), joten id-valitsinta on mahdollista kutsua myös fragmenttivalitsimeksi.

On kuitenkin huomattava, että CSS:ää tukevat selaimet hyväksyvät CSS:n suhteen saman id-attribuutin arvon useaankin otteeseen annettuna. Saman arvon omaavaa id-valitsimia (HTML-spesifikaatioiden vastaisesti) voisi käytännössä antaa useaan otteeseen samassa asiakirjassa luokkavalitsinten lisätarkentimina. Tällöin luokkavalitsimet määrittäisivät yleisiä ominaisuuksia ja id-valitsinten avulla annettaisiin poikkeuksellisia ominaisuuksia. Ongelmaksi muodostuu kuitenkin dokumentin oikeellisuuden tarkistus, sillä tarkistuspalvelut huomauttavat dokumentin olevan virheellinen. Sama lopputulos saadaan aikaiseksi standardilla tavalla käyttämällä samalle elementille useita luokkia (annan esimerkin edempänä).

On myös mahdollista antaa samalle elementille useita luokkia jättämällä välilyönti (esim. class="a b c"), esim.:

.a {color:black; border:1px solid black; blackgroud-color:white}
.special {color:red}
...
<div class="a special">

En pidä sitä kuitenkaan kovin suositeltavana tapana. Ominaisuudet voivat olla toisensa kumoavia. Selaimelle tulee lisätöitä selvitellessä prioriteettisuhteita ja CSS:n laatija itse voi mennä sekaisin. Mikäli niitä käytetään, on oltava erityisen huolellinen.

Jos luokkavalitsimet ilmaistaan attribuuttivalitsimina, niillä on sama prioriteetti. Mikäli kuvauslohkojen ominaisuudet ovat erilaisia, viimeksi annettu jää voimaan kuten seuraavissa esimerkeissä:

.testi {color:red}
*[class="testi"] {color:blue} /* tällä säännöllä on sama prioriteetti kuin edellisellä säännöllä, mutta sen on annettu edellisen jälkeen, jolloin se kumoaa edellisen; jotkut MS IE -selaimet lukevat tämän ikään kuin yleisvalitsimena */
p.testi{color:olive} /* tämä sääntö kumoaa edellisen, sillä mukana on elementtityypin tuoma tarkennus */
p[class="testi"]{color:green} /* tällä säännöllä on sama prioriteetti kuin edellisellä säännöllä, mutta sen on annettu edellisen jälkeen, jolloin se kumoaa edellisen*/

Voit katsoa virhesivulta lisää malleja, miten selaimen tulisi toimia.

Pseudo-class on apukäsite, joka CSS:ssä mahdollistaa elementtien luokittelun samaan tapaan kuin luokkien avulla, mutta joissakin tapauksissa HTML-dokumentin ulkopuolisiin seikkoihin perustuen (esim. sen mukaan, onko linkkiä seurattu vai ei).

Pseudo-element on apukäsite, jolla CSS:ssä liitetään valitsimia elementin esitysasullisiin aliosiin (kuten elementin esitysasun ensimmäiseen riviin or kirjaimeen) samaan tapaan kuin elementtityyppivalitsimia liitetään elementteihin.

Samoin eräänlaisia pseudoluokkia ovat CSS2 sivukatkosääntöihin liittyvät :left ja :right (sivusäännöt eivät toimi vielä kovin monessa selaimessa, mutta tulevaisuudessa niistä on hyötyä).

W3C: CSS2: 13 Paged media, 17 Tables.
Muita sivustoja: John Allsop: Kinds of Selector.