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

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]