Keskustelu: Nettisivujen teko: class- ja id-määritteiden erot

Kun käytetään sivujen ulkoasun muotoilemiseen CSS:ää, niin milloin tulisi käyttää class-määrettä ja milloin id-määrettä?
Mikä on käytännössä näiden ero?

Id on uniikki, eli saman id:n omaavia tageja voi sivulla olla vain yksi. Class sen sijaan voi olla vaikka kuinka monella elementillä sama yhtäaikaa, eli periaatteessa kannattaa käyttää id-selektoreja yksittäisiin elementteihin ja classeja ryhmiin. Eikä mikään tietenkään estä käyttämästä sekä id:tä että classia jonkun tietyn elementin tyylin säätöön yhtäaikaa.

Mitä tuolla id:llä sitten saavutetaan? Noh, siihen pääsee vissiin JS:llä käsiksi, mutta jos ajattelee pelkkää CSS:ää. Miksi kannattaa pistää siihen yksittäiseen elementtiin id-attribuutti, eikä class-attribuuttia? Ihan samanlailla voin tehdä class-attribuutista uniikin käyttämällä sitä vain kerran.

Siis esim header-divi, joka esiintyy sivulla vain kerran, niin miksi siinä kannattaa käyttää tuota id-attribuuttia eikä class-attribuuttia? Käytännössä ajavat kumminkin saman asian.

css-discuss puolelta löytyy loistava artikkeli lontooksi luokkien ja id:n eroista. Suurin hyöty id:n käyttämiseksi on IMO linkittäminen, pääset uniikin id:n omaavan elementin yläosaan helposti linkillä muotoa <a href="#uniikkiid">uniikki-id</a>.

Kiitos leftover linkistä. Olen tässä nyt puolitosissani yrittänyt selvittää tätä kysymystä ja mistään nyt ei löytynyt suoraa vastausta. Konkreettiset erot ovat nuo, että id-attribuuteilla varustettuihin kenttiin voidaan linkittää sekä niihin päästään käsiksi JavaScriptillä. CSS:n kannalta ei käsittääkseni ole mitään muuta kuin kosmeettinen ero. Tominnallisesti päästään samaan tulokseen käyttämällä pelkkiä class-attribuutteja, mutta käyttämällä kumpiakin fiksusti yhdessä saadaan lisää selkeyttä niin html-koodiin kuin CSS-tiedostoon.

Selektorien spesifisyydessä ID:llä ja classilla on eroa. Sitä onneksi harvemmin tarvitsee ajatella.

Mitähän tämä spesifisyys käytännössä tarkoittaa? Tuosta oli juttua jo tuolla aikaisemmassa linkissä, mutta ei oikein auennut...

Perussääntöhän CSS:ssä on, että viimeiseksi määritelty jää voimaan.
Jos mulla on <div id="palle" class="muuli">tekstiä</div> ja seuraavanlainen tyylisivu:

div {
  color: #000;
}

div {
  color: #f00;
}

Tulee tekstistä punainen.

Jos tyylisivu lukeekin

#palle {
  color: #000;
}

.muuli {
  color: #f00;
}

tulee tekstistä mustaa, sillä vaikka molemmat selektorit pätevät tuohon elementtiin ID-selektori on spefisifempi ("tarkempi") ja voittaa, vaikka class onkin määritelty myöhemmin.

Ahaa, johan selkis, kiitoksia vastauksista!

!important-määreellä voi saada tahtonsa väkisin läpi:

#palle {
  color: #000;
}

.muuli {
  color: #f00 !important;
}

Tällöin tekstistä tulee punaista. Ihan näin heittona.