[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Opassivut > 4. Mitä ovat valitsimet, luokat ja id-attribuutit > Luokkavalitsin, attribuuttivalitsimet ja id-valitsin > Luokka- ja attribuuttivalitsimet (jakso 2b)

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.
    Webreview.com: CSS2 Selectors Support Chart.

  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]