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

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]