Zbog potrebe da se različiti elementi unutar HTML-a mogu selektirati, postoje dvije vrste selektora: klasa i id. Iako se sam element može selektirati korištenjem negovog imena (npr. ul), kod složenih web stranica postoji previše elemenata da bi ovakav način mogao uspjeti.

Glavni koristici klasa i id-a su CSS i Javascript, preko kojih možemo upravljati određenim elementom unutar HTML-a. Ali koje su razlike?

ID je jedinstven

• element može imati samo jedan definirani id
• na stranici ne može (ustvari ne smije) biti više elemenata sa istim id-em

Iako vas nitko ustvari ne prisiljava da se držite ovih naputaka (web preglednik će prikazati stranicu čak i ako postoji više elemenata sa istim id-em), vaša stranica neće proći validaciju. Isto tako mogući su i problemi sa Javascript skriptama koje koriste taj id za neke svoje funkcije, te se treba držati ovog pravila jer nije tu bez veze.

Klase nisu jedinstvene

• jedan element može imati više klasa
• na stranici može biti bezbroj elemenata sa istom klasom

1
2
3

<div class="widget"></div>
<div class="widget veliki"></div>
<div class="widget"></div>

Iz gornjeg primjera, ako jedan element mora biti recimo veći od drugih, nema potrebe sa kreiranjem potpuno nove klase i prepisivanjem pola toga nanovo, nego mu se jednostavno pridoda još jedna klasa koja će sadržavati samo izmjene i dopune.

Što se tiće browsera, po defaultu nema nikakvih predefiniranih klasa i id-eva. Drugim riječima, ako  u CSS-u ne kažete šta ta klasa mora raditi, neće biti  nikakve razlike između elementa sa i bez klase. Nemojte misliti da će kopiranje imena klase u svoju stranicu donjeti neke rezultate. Treba prepisati i pripadajući CSS kod.

Za razliku od klase, id ima jednu dodatnu funkciju u web pregledniku, a to je hash vrijednost u URL-u. Recimo da imate link: www. moja-domena.com/index.html#blog, preglednik će pokušati pronaći element sa id-em “blog” i postaviti web položaj stranice upravo na njega. Također, ova funkcionalnost radi i unutar npr. diva koji ima vlastiti scroll bar.

Za razliku od CSS-a kojem je svejedno da li je na elementu klasa ili id (jednako će se ponašati), Javascript ipak poznaje razliku. Iako, danas jQuery daje mogućnost manipulacije kako klasama, tako i id-evima, prije je glavna funkcija bila getElementById koja je manipulirala elementima preko id-a.

I za kraj, korištenje klasa i id treba biti umjereno i ne trpati ih bilo gdje.
Ovo je savršen primjer nepotrebne klase, pošto svi znamo da je anchor tag link i nemora postojati nova klasa samo da bi se selektirao anchor element:

1

<a href="http://www.eugen-bozic.net" class="link">EugenBozic.net</a>

S druge strane dobar primjer je ovaj;

1

<div id="footer"></div>

Za imena klasa i id-a, probajte koristiti razimljiva koja neće biti određena prostorom pozicijom elementa. Npr. “lijevi-blok” je loše ime iz jednostavnog razloga ako float: left prebacite u float: right i odjednom to ustvari postaje desni blok, tada ili ćete mijenjati ime klase ili ćete ostaviti potpuno bezvezna imena klasa i id-a u kojima se poslje nećete snaći. Bolje ime za ovakav element bi bio npr. “sidebar”.