[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]

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.

Valitse

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[Pw].
Muita sivustoja: Keijo Kortelainen: Valitsimet.

Käsittelen tällä sivulla myös CSS:n kanssa käytetyt erityisattribuutit class (class="...") ja id (id="..."), koska kyseisiä attribuutteja käytetään eräiden valitsimien toimintamekanismeissa.

Valitsimilla on toisiinsa nähden erisuuruisia painoarvoja (weigth), joten ne luovat toisiinsa nähden porrastetun järjestyksen (cascading order). Käsittelen tällä sivulla alustavasti tätä näkökulmaa. Sivulla 5[S][Pw] käsittelen joitakin harvinaisempia valitsimia (adjacent sibling selector - valitsintyypin + first-child pseudo-class näennäisluokkavalitsimen), koska niiden käsittely on luontevampaa toisessa yhteydessä. Käsittelen tuolla sivulla syvällisemmin, missä järjestyksessä selain lukee CSS-ominaisuudet. Kokoan siinä myös erilaiset sovitussäännöt. Nämä kaksi sivua siis kuuluvat yhteen ja esitän asiat vain hieman eri järjestyksessä kuin virallinen spesifikaatio.

[Alku]

Perusvalitsimet ja ryhmittäminen

Aiheet

Yleisvalitsimet

Yleisvalitsimella tarkoitetaan sitä, että selain ei siis yritä löytää dokumentista mitään tiettyä vastaavuutta, vaan selain etsii kaikki dokumentin elementit, joihin CSS:ää voi soveltaa. Yleisvalitsimilla on valitsimista alin prioriteetti.

Muistutus. Kuten jo aiemmin olen tuonut esille, elementin tunnisteella ei tarkoiteta koko elementtimerkkausta (tag), vaan jotain merkkauksen aliosaa, joka toimii tunnisteena. Yleisvalitsimen kyseessä ollessa tunnistimina ovat elementtityyppien nimet eli yleistunnistimet (generic identifiers) = elementtimerkkaukset ilman alku- ja loppurajoittimia sekä attribuutteja. Esimerkkinä voisi mainita elementit P ja B (sanan identifier termipuu[S][Pw]).

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 ([M][S][Pw]):

*{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[S][Pw]). 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):

sääntö (rule)
kuvauslohko (declaration-block)
kuvaus (declaration)
valitsin (selector) ominaisuus (property) arvo (value)
* { font-family : Verdana, Arial, sans-serif; }

Englanninkielisessä tekstissä sääntöjä nimitetään myös sanoilla rule sets ja statements (=käsky, lause; ks. sanan määrittely[S][Pw]). 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ö ([M][S][Pw]):

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.

Selainkohtaisia huomautuksia:

  1. CSS3:een on lisätty XML:n nimiavaruuksista (namespace) riippuvaisia valitsimia (esim. *|*, |* ja ns|*, jossa ns on XML-nimiavaruus, johon CSS:ää sovelletaan). Ainakin yleisvalitsimeen liittyvät säännöt toimivat uusissa Mozilla Gecko (esim. Netscape 6.x+) ja Opera 7.x selaimissa.

  2. MS IE 5.x+ tukee epästandardilla tavalla XML-nimiavaruuksia (ns\elementti).


W3C: CSS3 module: W3C selectors (W3C Working Draft 26 January 2001).
[Alku]

Ryhmittäminen

Jotta samoja kuvauslohkoja ei tarvitsisi kirjoittaa useaan kertaan, niitä voidaan ryhmittää (grouping). Ryhmään voidaan koota kaikkia mahdollisia sääntöjä. Tässä yhteydessä on olennaista vain se, että yksittäiset ryhmän jäsenet erotetaan toisistaan pilkulla. Seuraavassa on muutamia ryhmittelyesimerkkejä ([M][S][Pw]):

h1,h2,h3,h4,h5,h6 {color:red;background-color:yellow;border:red 1px solid;} /* tässä ryhmässä on vain tavanomaisia elementtityyppivalitsimia, jotka erillismäärittelyjen sijaan määritellään yhtä aikaa; peräkkäiset pilkut eivät ole sallittuja eikä lista saa päättyä pilkkuun */
h1, p.red {color:red;background-color:yellow;border:red 1px solid;} /* tässä ryhmässä jälkimmäisessä on luokkatarkennin - sen sisältö selvitetään seuraavaksi */
ol li, ol li li li {color:red;background-color:yellow;border:red 1px solid;} /* tässä ryhmässä on koottu ns. hahmonsovitusperiaatteella toimivia määrittelyjä (selitän toisessa yhteydessä mitä periaatteella tarkoitetaan) */
[Alku]

Luokkavalitsin, attribuuttivalitsimet ja id-valitsin

Aiheet

Yleistä luokka-, attribuutti- ja id-valitsimista

Valintakriteereitä voi tarkentaa käyttämällä luokka- (class) ja id-attribuutteja (id tulee sanasta identification) sekä niitä vastaavia valitsimia (class selector tai id selector) tai hyödyntämällä mitä tahansa attriubuuttia. CSS-terminologian pohjalta class ja id attribuutteihin laitetut nimet toimivat elementtitunnisteina.

Luokkavalitsin on tarkoitettu useille samassa dokumenteissa oleville elementeille. Sen ideana on auttaa voittamaan elementtien nimien tuoman rajoituksen. Voit luoda niitä käyttäen niin monta "uutta elementtiä" kuin haluat.

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ä).

Luokka- ja id-valitsimen nimen voi määritellä sangen vapaasti, mutta niillä on kuitenkin eräitä rajoituksia (samantapaiset rajoitukset ovat yleisiä muissakin ATK-kielissä, mutta säännöt vaihtelevat hieman eri kielissä):

  • Nimen pitää alkaa kirjaimella. Normaalisti ja ongelmitta käytettäviä kirjaimia ova a-z,A-Z + tavuviiva. Alaviivan (_) salliminen on jälkikäteen lisätty CSS2:een.
W3C: Errata in REC-CSS2-19980512.
  • Numeroita saa käyttää, mutta ei ensimmäisenä merkkinä kuten ei myöskään tavuviivaa.
  • Isojen ja pienten kirjainten ero riippuu siitä, käytetäänkö niitä HTML- vai XML-dokumenteissa. Jälkimmäisissä isojen ja pienten kirjainten välillä on ero (engl. kirjaimet ovat case sensitive).
  • Jos käyttää erikoiskirjaimia, niiden eteen tulee laittaa takakenoviiva eli merkki \ (backward slash), esim. w\?. Samoin ISO 10646 161 tai yli olevat kirjaimet ovat periaatteessa käytettävissä numeerisina koodeina. Tyyliattribuuteissa voi käyttää entiteettikoodeja (esim. style="voice-family: D&#252"), mutta ne eivät toimi erillistiedostoissa eivätkä elementin STYLE kanssa (niissä tarvitaan kenoviivoja).

Selainkohtaisia huomautuksia:

  1. Selaimet hyväksyvät virheellisiä nimiä. MS IE 5.x Windows hyväksyy niitä eniten. Tämä on korjattu MS IE 6.0:ssa standard-compliant -moodissa[S]. Myös monet Netscape- ja Opera-selaimet hyväksyvät virheellisiä nimiä, mutta eivät yhtä paljon kuin MS IE 5.x Windows. Minulla on mallisivu[S][Pw] tämän asian testaamiseksi.

  2. Jotkut selaimet reagoivat aina isojen ja pienten kirjainten väliseen eroon attribuutin class arvoissa, mutta kaikki selaimet eivät. Käytä class ja id attribuutteihin viittaavissa säännöissä isoja ja pieniä kirjaimia aina samalla lailla kuin ne ovat itse asiakirjoissa.

  3. En suosittele minkään erikoiskirjaimen käyttämistä, sillä kokemusteni mukaan ne toimivat (ainakin osittain) vain Netscape 6.0+ - ja MS IE 6.0 Windows -selaimissa.

Microsoft: CSS Enhancements in Internet Explorer 6 Public Preview.
[Alku]

Luokka- ja attribuuttivalitsimet

Aiheet

Luokkavalitsin

Seuraavassa on esimerkki elementin P CSS luokka-attribuutista ja sen määrittelystä. Asiakirjan runko-osassa voi olla luokka-attribuutti class="red" ([M][S][Pw]):

<P class="red">Tässä kappaleessa oleva teksti näkyy punaisena</P>

Elementille on olemassa joko asiakirjan alussa or erillistiedostossa sääntö, jossa on vastaavuus elementin sisällä ilmoitettuun tietyn nimiseen luokkaan. CSS-koodauksessa se liitetään pisteellä muihin valitsimiin, esim.:

p.red {color:red;} /* pistettä ennen on elementin nimi ja pisteen jälkeen tulee CSS luokka-attribuutti */

Elementillä on tällöin aina kaksi tai useampi tunnistetta. Ensiksi sillä on elementtityypin nimi (P) ja toiseksi tietyn luokan nimi (red). Nämä kaksi tunnistetta on kytketty toisiinsa. Liittämällä luokkatunniste yleisvalitsimeen, elementti tunnistetaan käytännössä siinä olevan luokan nimen perusteella (yleisvalitsin ei kohdista valintaa millekään tietylle elementille).

.red {color:red;}

Tämän säännön voi liittää (melkein) mihin tahansa elementtiin laittamalla elementtien alkumerkkauksiin attribuutin class="red". Huomaa kuitenkin, että syntaktisesti luokka liittyy aina johonkin toiseen tunnistimeen ja sääntöön.

Luokkavalitsimet ovat tavallaan attribuuttivalitsimia, jotka käyttävät pistettä erotinmerkkinään. CSS2 tuo mahdollisuuden myös puhtaaseen attribuuttiperustaiseen valitsinten käyttöön ottamalla käyttöön yleiset attribuuttivalitsimet (attribute selectors), joita voidaan pitää varsinaisina attribuuttivalitsimina. Tällöin periaatteessa mitkä tahansa attribuutit ja niiden arvot toimivat tunnisteina. Koska class on semanttisessa mielessä attribuutti, se voidaan esittää muiden attribuuttien tavoin käyttäen varsinaisia attribuuttivalitsimia. Käsittelenkin seuraavaksi attribuuttivalitsimia.

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.

Selainkohtaisia huomautuksia:

  1. Luokkavalitsimia voidaan yhdistää toisten luokkavalitsimien kanssa jos attribuutilla class on välilyönnin erottamia luokkalistoja, esim. <th class="a b c">. MS IE -selaimet eivät tue kunnolla yhdistettyjä luokkavalitsimia. Esim. th.a.b.c pitäisi toimia <th class="a b c"> mutta ei <th class="c"> kanssa kuten se toimii MS IE -selaimissa. Luokan nimien joukossa pitää olla a, b ja c, mutta MS IE ottaa huomioon vain sääntölistassa viimeisenä olevan luokan nimen. MS IE käyttäytyy ikään kuin th.a.b.c == th.c. Luokan nimi sinänsä voi olla satunnaisessa paikassa class-attribuutin sisällä, esim. class="x b c a". Erich Mayerin mukaan yhdistelmät eivät toimi myöskään MS IE Mac-selaimissa.
  2. Netscape 4.x ja MS IE 4.x Windows eivät tue useiden luokkien antamista samalle elementille (testasin class="noPrint b" eikä Netscape 4.79 näyttänyt tekstiä lihavoituna .b {font-weight:bold} mukaisesti).

Attribuuttivalitsimet

Attribuuttivalitsimet on ensisijaisesti suunniteltu XML-dokumentteja varten, jotta CSS:llä on mahdollisuus toimia minkä tahansa XML-pohjaisen kielen kanssa (eräät XML-pohjaiset kielet nimittäin vaativat niiden toimivuutta). CSS2:n mukaan *.red {color:red;} ja p.red {color:red;} -tyyppiset säännöt on tarkoitettu vain HTML-dokumenteille. XML-dokumenteissa ei pitäisi käyttää tällaisia yhdistelmäsääntöjä. Niissä tulisi käyttää vain yleis-, elementti- ja attribuuttivalitsimia sekä niiden yhdistelmiä.

Koska XML on metakieli, XML-dokumenttien elementeillä ja attribuuteilla (muutamia perusattribuutteja lukuunottamatta) ei ole mitään oletuskäyttäytymistä tai -tehtävää elementit ja attribuutit tulee pystyä tunnistamaan sinänsä. Vaikka .luokka {} ja #id {} tyyppisten sääntöjen (käsittelen jälkimmäistä tyyppiä edempänä) tukeminen ei kuulu tiukkoihin XML-kieliin XHTML:ää tukevien selainten oletetaan tukevan niitä. .luokka {} ja #id {} muotoisten sääntöjen ei pitäisi kuitenkaan automaattisesti toimia XML-pohjaisissa kielissä kuten ei myöskään style attribuutin sisällä olevan CSS:n. Jos selain ei saa DTD-tietoja, edellä mainitut CSS:n määrittelytyypit pitäisi hylätä. Ne pitäisi hyväksyä vain siinä tapauksessa, että käytetty dokumenttityyppi tukee id, class and style attribuutteja samalla tavalla kuin HTML:ssä.

Attribuuttivalitsimet käyttävät hakasulkuja ([]). Attribuuttivalitsimissa attribuuttien nimet ja niiden arvot toimivat tunnisteina. Ne toimivat aina yhdessä muiden valitsinten kanssa kuten seuraavissa esimerkeissä (mallisivussa[S][Pw]):

[href] {color:red} /* tämän esimerkin mukaan kaikki elementit, jotka sisältävät attribuutin href saavat punaisen värin; tässä esimerkissä vain attribuutin nimi toimii tunnistimena */
[class="example"] {color: blue;} /* mikä tahansa elementti, jolla on luokka-attribuutti example saavat sinisen värin; tällä kertaa tunnistimena on sekä attribuutin nimi että sen tarkka arvo */
[class~="red"] {color:red;} /* mikä tahansa elementti, jossa on luokka-attribuutti red saavat punaisen värin; ~-merkki ei ole tässä tapauksessa välttämätön; sitä voidaan käyttä, jos class attribuuteilla on välilyönnin erottamia arvolistoja, esim. class="green red" (esimerkin sääntö koskee myös tätä attribuuttia) */
*[src] {background-color:aqua} /* mikä tahansa elementti, jolla on attribuutti src, saavat taustavärin aqua; yleisvalitsimen (*) käyttö ei ole periaatteessa välttämätöntä */
span[class="example"] { color: blue; } /* elementti SPAN, jolla on luokka-attribuutti example saavat sinisen värin; - huomaa, että elementtivalitsimen nimen on oltava kiinni attribuuttivalitsimessa; välilyönti muuttaa sisällön seuraavanlaiseksi: elementti SPAN, jonka perässä on elementti, jolla on attribuuttina class="example", saavat sinisen värin (selitän myöhemmin tarkemmin tämänkaltaisia sääntöjä) */
p[class~="red"] {color:red;} /* ne P elementit, joilla on luokka-attribuutti red saavat punaisen värin; */

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[S][Pw].

Selainkohtaisia huomautuksia:

  1. MS IE -selaimet eivät osaa ensisijaisesti XML:lle tarkoitettuja attribuuttivalitsimia.

  2. Attribuuttivalitsimet toimivat tällä hetkellä vain Mozilla Gecko, Opera 4.x+, Konqueror (Linux) ja Safari (Mac) -selaimissa. Opera 4.x-6.x:n kohdalla ne toimivat melkein kaikissa tilanteissa, mikäli niiden kanssa käytetään eksplisiittisesti elementtityyppi- tai yleisvalitsimia, esim. a[target="new"] {...} or *[target="new"] {...}.

  3. Muoto *[...] {...} aiheuttaa eräillä MS IE -selaimilla virhekäyttäytymisen. Käytä siksi vain muotoa a[...] {...}.

  4. Attribuuttivalitsimet voivat käyttää myös | merkkiä, esim. th[class|="a"], jolloin class attribuutilla on tavuviivan erottama arvolista, joka alkaa tietyllä sanalla. Yhdistetyissä säännöissä, jotka käyttävät | (esim. td[class|="a"][id="a"]) Opera hylkää jälkimmäisen attribuuttivalitsimen (edellä mainitun säännön ei pitäisi toimia <td class="a-b-c" id="b"> kanssa kuten se toimii Operassa).

  5. Mozilla Gecko -selaimet tukevat attribuuttivalitsimia myös eräille kuvitteelliselle attribuuteille eli voisi sanoa että se tukee "näennäisattribuuttivalitsimia" (ks. CSS notes 1[S]).

  1. MS IE ja Opera hyväksyvät XML-dokumenteissa myös vain HTML-dokumenteille tarkoitetut säännöt. Tällä menettelyllä MS IE - ja Opera-selaimet häpäisevät XML:n perusperiaatetta. Ne luovat nimittäin XML-elementtien attribuuteille automaattisesti HTML:n kaltaisen oletuskäyttäytymisen.

  2. Olen huomannut, että joskus ei saa samoilla arvoilla yhtäläistä lopputulosta MS IE -, Mozilla Gecko - ja Opera-selaimille. Tällöin voi attribuuttivalitsimia käyttäen antaa jälkimmäisille selaimille omat arvot. Tästä syystä olisi jopa suotavaa, että MS IE ei milloinkaan tukisi attribuuttivalitsimia.

  3. Mozilla Gecko -selaimet käyttävät XML:ssä ehdotettua @namespace at-sääntöä tunnistaakseen käytetäänkö HTML:n mukaisia CSS-periaatteita. Nämä selaimet määrittelevät HTML-asetukset tiedostossa /res/html.css. Siinä on alussa @namespace url(http://www.w3.org/1999/xhtml);. Jos dokumentissa on vastaava xmlns tieto (xmlns="http://www.w3.org/1999/xhtml"), ne tulkitsevat CSS:n HTML-periaatteiden mukaan, sillä XHTML 1.0:ssa aiemmin mainitut attribuutit toimivat HTML:n tavoin. Ilman täsmäävää nimiavaruusattribuuttia, ne tulkitsevat CSS:n yleisten XML-periaatteiden mukaan, jolloin attribuutit class, id ja style toimivat vain varsinaisia attribuuttivalitsimia käyttäen.

[Alku]

Id-valitsin

Jotta id-valitsin erottuisi muista tunnisteista, se liitetään elementissä attribuutin id sisälle. CSS-koodauksessa se käyttää merkkiä #. Se voidaan liittää välittömästi jonkin muun valitsimen perään ilman pistettä. Jos se liitetään yleisvalitsimeen, sen muoto on *#joku-id. Tämä on kuitenkin turhaa, sillä attribuuttivalitsimien tavoin, niitä ei tarvitse eksplisiittisesti liittää mihinkään elementtiin. Seuraavassa on id-valitsimen käytön esimerkki ([M][S][Pw]):

<HEAD>
<TITLE>
Sovita id-valitsin vain elementille H1</TITLE>
<STYLE type="text/css">
h1#z98y {letter-spacing: 0.5em } /* huomaa # - merkki, joka ilmaisee, että kyseessä on id-valitsin; väliin ei tule pistettä; mikäli jätät tyhjän välin, säännön sisältö muuttuu toiseksi */
</STYLE>
</HEAD>
<BODY>
<H1 id="z98y">
Laajaa tekstiä</H1>
</BODY>

Id-valitsinten painoarvo on suurempi kuin attribuuttivalitsimien. Siten esim. #p123 {...} on tarkennetumpi sääntö kuin [id="p123"] {..}. Merkintätavan mukaan niiden tulisi olla saman arvoisia, sillä niillä on asiakirjan runko-osassa sama vastaavuus (esim. <P id="p123">). Asialla ei tällä hetkellä suurta merkitystä, mutta tulevaisuutta ajatellen tämäkin seikka on hyvä pitää mielessä (katso toinen esimerkki virhesivulta[S][Pw]).

Vaikka style-attribuutit eivät luo varsinaisia sääntöjä (niiden sisällä on vain yksittäisiä kuvauksia ja kukin niistä muodostaa yhden kuvauslohkon), ne luovat omaa painoarvoaan vastaavia loogisia sääntöjä. CSS1 spesifikaatiossa sanotaan näin:

A declaration in the STYLE attribute of an element (...) has the same weight as a declaration with an ID-based selector that is specified at the end of the style sheet.

CSS2 spesifikaatio (6.4.3 Calculating a selector's specificity) sanoo, että ne ymmärretään olevan muiden sääntöjen jälkeen. Tässä ei ole kyse painoarvosta vaan ns. cascading order[S]-periaattesta, jota käsittelen edempänä.

Selainkohtaisia huomautuksia:.

  1. Koska id-tunnisteita käyttävät muutkin kuin CSS-määrittelyt, ne voivat aiheuttaa tiedoston laatijalle sekaannuksia. Mm. JavaScript-koodus käyttää elementtien sisällä samanlaisia tunnisteita. Tosin samaa tunnistetta voi yhtä aikaa käyttää sekä CSS että JavaScript - jälkimmäiselle id:n arvo tulee olla ehdottomasti uniikki!

  2. Samojen tunnisteiden käyttäminen eri tarkoitukseen ei yleensä tuota asiakassovellukselle (User agent, UA) ongelmia, sillä niitä tulkitsevat ohjelman eri alikomponentit. Tosin saamani sähköpostin mukaan samojen tunnisteiden käyttö sekä CSS:n että skriptien kanssa voi tuottaa ongelmia MS IE 4.x Windows -selaimissa. On myös tärkeää käyttää nimiä, jotka toimivat sekä JavaScript että CSS käytössä. Olen laatinut ohjeet sivulla Help for HTML All menu[S].

  3. Koska XML-kielissä ei tarvita DTD:tä (tai selaimet eivät sitä aina lue) #id {} muotoiset säännöt eivät välttämättä toimi kaikissa XML-kielissä. Ks. myös aiempi XML-periaatteisiin liittyvä huomautus[S] sekä attribuuttivalitsinten käsittelyn ensimmäinen kappale[S].

[Alku]

Näennäisluokat ja -elementit

Aiheet

Toimintaperiaate

Näiden luokkien määrittelyt on luotu siksi, että mitkään tavanomaiset dokumenttipuuhun[S][Pw] perustuvat määrittelyt eivät toimi tietyissä tilanteissa. Siksi on luotu kaksi apukäsitettä, jotka muistuttavat normaaleja tyyppi- ja luokkamäärittelyjä. Koska ne eivät kohdistu lähdekoodissa nähtävään kokonaiseen elementtiin (kuten <P></P>), ne ovat tavallaan fiktiivisiä. Niitä nimitetään siksi näennäiselementeiksi ja -luokiksi.

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.

Näennäisluokat

Yksinkertaiset elementtityyppivalitsimet eivät ole sidoksissa elementin sisällä oleviin attribuutteihin. Näennäisluokka liittyy aina joko todelliseen tai kuvitteelliseen attribuuttiin periaatteessa aivan samalla mekanismilla kuin class-attribuutti (muista että myös luokkavalitsin on sidottu tiettyyn attribuuttiin). Näennäisluokat tarjoavat mahdollisuuden saman elementin erilaiseen esitystapaan vaihtelevissa tilanteissa.

Erityisesti linkeillä voi olla hyvinkin monia esitystapoja eri tilanteissa ja yleisimmin tämän ryhmän määrittelyjä tapaa juuri linkeissä. Linkin olemassaolo ilmaistaan HTML-dokumenteissa attribuutilla href ja linkin tilan esitysmuoto määritellään HTML 3.2:ssa BODY elementille annetuilla link ja visited attribuuteilla. Näennäisluokat :link ja :visited antavat mahdollisuuden määritellä linkin tilan esitysmuoto ilman HTML-attribuutteja.

Linkkeihin liittyviä näennäisluokkia ovat linkkinäennäisluokat (link pseudo-classes) :link & :visited sekä dynaamiset näennäisluokat ( dynamic link pseudo-classes) :hover, :active ja :focus. Dynaamiset näennäisluokat koskevat muitakin elementtejä kuin vain ankkurielementtiä (A) ja ne liittyvät ainoastaan elementin kulloiseenkin tilaan.

W3C: CSS2: 5.11.2 The link pseudo-classes[Pw], 5.11.3 The dynamic pseudo-classes[Pw].

Linkkeihin liittyvien näennäisluokkien muoto on esim.:

a:link { color: red }
:link {color: red }
/* ankkurielementtiä A ei ole tässä tapauksessa välttämätöntä merkitä HTML-asiakirjoissa, sillä selain tietää, että näitä käytetään vain ankkurielementtien yhteydessä */

Selainkohtaisia huomautuksia:

  1. Näennäisluokka :link edellyttää toimiakseen sen, että ankkurielementti sisältää attribuutin href eikä niiden pitäisi toimia pelkän elementin A kanssa. Netscape 4.0x ja Opera 3.x tukevat :link ilman href attribuuttia.

  2. Opera 3.x ja Netscape 4.x tukevat vain linkkinäennäisluokkia (:link, :visited).

  3. MS IE 4.x+ tukee :active CSS1-spesifikaation mukaan (linkkinäennäisluokan tavoin) ja :hover rajoitetusti.

  4. Opera 4.0x tukee :hover ja Opera 5.0x+ lisäksi :active (molemmat toimivat rajoitetusti).

  5. Laajin tuki on Mozilla Gecko ja Opera 7.x+ -selaimissa, jotka tukevat myös :focus. Niissä dynaamiset näennäisluokat voidaan liittää myös muihin elementteihin kuin elementtiin A. Tästä syystä pitäisi aina merkitä, mitä elementtejä dynaamiset näennäisluokat koskevat (esim. a:hover). Opera tukee :hover laajimmin, mutta :focus toimii vain lomakekontrollielementtien kanssa, mikä on mielestäni oikein sillä A vain toteuttaa tietyn tehtävän, mutta elementti ei pysy fokuksessa.

Käsittelen linkkeihin liittyvien näennäisluokkien käyttöä vielä sivulla 7[S][Pw].

Samalla periaatteella toimivat kielinäennäisluokka (:lang()). Se reagoi dokumentin kieliattribuuttiin ikään kuin se olisi luokkatarkennin.

W3C: CSS2: 5.11.4 The language pseudo-class[Pw].

Vain CSS2 -tason näennäisluokka on myös first-child pseudo-class, jonka merkintänä on :first-child. Käsittelen sen käyttötavan sekä toimivuuden sivulla Prosessointijärjestys[S][Pw]. Samassa yhteydessä käsittelen ns. adjacent sibling selector - valitsintyypin. :first-child on luokkien kaltainen apukäsite, mutta ei elementtityypin lisäksi otetaan huomioon elementin järjestys ikään kuin se loisi luokkatarkentimen. :first-child valitsee ensimmäisen saman tason samaa tyyppiä olevan elementin.

Selainkohtaisia huomautuksia:.

  1. Kielinäennäisluokka ei toimi missään selaimessa. Kieliriippuvaisia sääntöjä voidaan luoda Opera ja Mozilla Gecko -selaimille attribuuttivalitsimia käyttäen. [lang="en"] on HTML-dokumenteille sama kuin :lang(en). Kieliehto ei koske kuitenkaan XML-dokumentteja, sillä niissä käytetään xml:lang attribuuttia. Kielinäennäisluokka on siten merkintäkieliriippumaton, joten esim. :lang(en) koskee sekä xml:lang="en" että lang="en" attribuutteja.

  2. :first-child toimii vain Mozilla Gecko ja Opera 7.x+ -selaimissa.

Väännetään vielä rautalangasta malli, mitä kaikkia ainakin jossakin selaimessa toimivia tunniste- ja valitsintyyppejä yksittäisellä elementillä voi tähän mennessä käsiteltyjen valitsinten perusteella olla.

<A href="joku.hml" target="new" class="oma" id="toinen">

Tuo elementti sisältää seuraavat mahdolliset tunnistetyypit, joihin voidaan viitata CSS-säännöissä:

  1. * (* {...}) = ei erityistunniste - selain vain tunnistaa, että dokumentissa on elementtejä
  2. A (a {...}) = elementtityyppitunniste
  3. oma (.oma {...}) = luokkatunniste
  4. toinen (#toinen {...}) = id-valitsimen tunniste
  5. class, id, href, target ([class] {...} jne.) = attribuutin nimi attribuuttivalitsimen tunnisteena
  6. class="oma", id="toinen", href="joku.html", target="new" ([class="oma"] {...} jne.) = attribuutti + attribuutin arvo attribuuttivalitsimen tunnisteena
  7. a:link, a:visited (a:link {...} jne.) = tunnistus, onko linkissä vierailtu vai ei (linkit staattiset tilat)
  8. a:hover, a:active, a:focus (a:hover {...} jne.) = tunnistus, mikä on linkin mahdollinen dynaaminen tila

Näennäiselementit

Näennäiselementit eivät käytä mitään attribuuttia lisätunnistimenaan. Ne toimivat yhdessä muiden valitsinten kanssa. Jos näennäiselementti liittyy vain tiettyyn elementtityyppiin, siihen ei tarvitse liittää muita valitsimia. Koska CSS2:n mukaan :first-letter ja :first-line voidaan liittää mihin tahansa lohkoelementteihin (CSS3:n mukaan em. näennäiselementit koskevat mitä tahansa elementtiä) on tarpeen merkitä, mitä elementtiä ne koskevat. Niille voitaisiin luoda kuvitteellinen koodijono (fictional tag sequence) ja ensimmäinen voitaisiinkin korvata esim. koodisarjalla <B><BIG><FONT color="#660033"> ? </FONT></BIG></B>, mutta jälkimmäiselle sitä ei aina voi luoda, koska rivi voi katketa ei kohdista, mikäli sitä ei ole pakotettu tiettyyn leveyteen.

HTML 3.2 koodisarjat ovat hitaita luoda ja ne ovat sangen joustamattomia. Näennäiselementit ovat helppo ja joustava tapa tehdä kappaleiden ensimmäisille kirjaimille tai ensimmäiselle riville muista poikkeava esitystapa. Esim. seuraavan kuvauksen mukaan kappaleiden ensimmäinen kirjain on 120% suhteessa kappaleen muuhun tekstiin, lihavoitu ja väriltään #660033 eli violetinruskea ([M][S][Pw]):

p:first-letter {font-size:120%; font-weight:bold; color:#660033;} /* kappaleen alkukirjan */
p:first-line {font-size:110%;} /* kappaleen ensimmäinen rivi */

Selainkohtaisia huomautuksia:.

  1. Opera 3.51-3.6x, MS IE 5.5+ Windows ja MS IE 5.0+ tukevat niitä CSS1-tasoisesti. Tosin olen havainnut, että ne eivät aina toimi MS IE -selaimissa. Tekemissäni testeissä outo seikka oli se, että MS IE 6.0 Windows tuki niitä CSS-sivuillani LI mutta ei P elementeille kuten MS IE 5.5 Windows.

  2. MS IE 5.5:ssä font-size ominaisuus ei toimi p:first-letter kanssa jos kappale ala jollakin rivinsisäiselementillä. Joissakin tilanteissa fontin värin muutokset saattavat aiheuttaa virheellisen lopputuloksen. Näennäiselementtejä voi käyttää otsikkoelementtien kanssa.

  3. Jos ensimmäinen kirjain on elementti (esim. <p><cite>Alkusana<cite>) Opera 7.x hylkää kaikki sellaiset omainaisuudet, jotka ovat ristiriivassa kyseisen elementin kanssa vaikka ominaisuudet olisi merkitty näennäisluokalle :first-letter erityisen tärkeiksi (käsittelen tärkeysjärjestystä myöhemmin).

  4. Jos elementti P on määritelty käyttäytymään rivinsisäiselementtinä Opera hyväksyy p:first-letter myös tällöin vaikka sitä pitäisi soveltaa vain lohkoille.

  5. Opera 4.x+ ja Mozilla Gecko -selaimet osaavat sekä CSS1 että CSS2 tason näennäiselementtivalitsimet (:before and :after), joita käsittelen niitä myöhemmin tällä sivustolla.


W3C: CSS2: CSS2 5.12 Pseudo-elements[Pw].

[Alku]

Muut valitsimet ja valitsinluettelot

Aiheet

Yleistä

Niiden lisäksi ns. taulukoita käsittelevillä sivuilla puhutaan valitsimista (row selectors ja column selectors). CSS2 spesifikaatiot eivät liitä niitä yleiseen valitsinlistaan vaan se käsittelee niitä luvussa 17. CSS2 standardi ei liitä niitä yleislistaan eikä niillä ole mitään erityisvalitsimia, vaan ne hyödyntävät jo aiemmin esille tulleita valitsintyyppejä.

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ä).

Selainkohtaisia huomautuksia:

  1. Näennäisluokat :left ja :right toimivat uusissa Opera selaimissa.

  2. Uudet Mozilla Gecko -selaimet tukevat suurta joukkoa selainkohtaisia näennäiselementtejä ja -luokkia (ks. CSS notes 1[S]).


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

CSS2:n valitsimet

  • The universal selector
  • The element type selector/ type selector
  • The first-child selector
  • The adjacent sibling selector
  • The class selector
  • The id selector
  • Attribute selectors
  • Pseudo-class selectors:
    • Link pseudo-classes:
      • :link
      • :visited
    • Dynamic pseudo-classes:
      • :active
      • :hover
      • :focus
    • The language pseudo-class
    • The first-child pseudo-class
  • Pseudo-element selectors:
    • :fist-letter
    • :fist-line
    • :before
    • :after
  • Erityisnäennäisluokat, joita käytetään sivukatkoissa:
    • :first
    • :left
    • :right
[Alku]

CSS3:n valitsimet

CSS3:een on ehdotettu seuraavia uusia yleiskäyttöisiä valitsimia:

  • Rakenteellisia näennäisluokkia (structural pseudo-classes):
    • :root
    • :not-first-child
    • :last-child
    • :not-last-child
    • :first-of-type
    • :not-first-of-type
    • :last-of-type
    • :not-last-of-type
    • :only-of-type
    • :not-only-of-type
    • :only-child
    • :not-only-child
    • :nth-child(n) (n=kokonaisluku)
    • :nth-of-type(n)
  • Muita näennäisluokkia:
    • :subject (subject element pseudo-class)
    • :target (target pseudo-class)
  • Muita valitsimia:
    • "" (esim. address"someContent"; sisältövalitsin, content selector)
    • ~ (esim. ul ~ ol; epäsuora sisarvalitsin indirect adjacent combinator)

Näiden lisäksi on ehdotettu HTML 4.0 lomake-elementtien toiminnallisuuksia simuloivia sääntöjä[S].

Selainkohtaisia huomautuksia:

  1. Mozilla Gecko -selaimet tukevat useimpia CSS3:een ehdotettuja näennäiselementtejä ja -luokkia (ks. CSS notes 1[S]).

En kuitenkaan käsittele niitä. Seuraavaksi on prosessointijärjestyksen käsittely.

[Alku]
   
Copyright Tapio Markula 1999-2003, Salo (kotisivu, s-posti - lisää s-postiosoiteeseen pisteellä erotettuna nimeni, Tapio Markula) (@dnainternet.net) - ei julkiskäyttöön ilman sopimusta.
Get Expression!
Editori, jolla saa luotua standardit täyttäviä HTML ja XML dokumentteja. Tämän sivuston sivut on useimmissa tapauksissa tarkastettu Dave Raggetin (W3C) tekemällä HTML-Tidy apuohjelmalla ja satunnaisesti W3C-organisaation virallisella koodintarkastusohjelmalla. Useimpien sivujen syntaksin pitäisi olla sopusoinnussa W3C:n XHTML 1.0 spesifikaation kanssa. Testaa tämä sivu!
Informaatiota selaimista, jotka näyttävät tai tulostavat tämän sivuston parhaiten.
[Hae Opera] [Hae Mozilla!]
CSS-opasta on viimeksi muutettu 20.12.2004