Često je potrebno da se CSS-pravilo primijeni samo na točno određene HTML-elemente.

Da bi se to postiglo, u HTML-u te elemente treba označiti klasom određenog imena, upotrebom atributa class:

 

<p class="poslovica"> Tko rano rani, dvije sreće grabi. </p>

 

Kada se u selektoru navodi klasa, obavezno se prije imena klase mora staviti točka:

 

.poslovica {

    color: red;

}

 

Navedeno pravilo vrijedit će samo za elemente koji imaju postavljenu klasu poslovica.

Osim pomoću klase, HTML-elementi mogu se označiti i identifikatorom pomoću atributa id.

 

<p id="jutro"> Jutro je pametnije od večeri. </p>

 

Kada se u selektoru koristi identifikator, prije identifikatora se mora navesti oznaka #, kao u primjeru:

 

#jutro {

    color: red;

}

 

Ovo pravilo primijenit će se samo na element s identifikatorom jutro.

 

Identifikator treba biti jedinstven – na istoj HTML-stranici ne bi trebalo dva puta upotrijebiti isti identifikator.

 

Kod klasa nema tog ograničenja – ista se klasa može upotrijebiti samo jednom, a možemo se upotrijebiti i više puta.

Prilikom imenovanja klasa i identifikatora treba se voditi određenim pravilima.

 

• Dopušteni znakovi su slova od A do Z, brojevi od 0 do 9, crtica ( - ) i donja crta ( _ ).
• Naziv klase, odnosno identifikatora, ne smije započeti brojem (a ne preporučaju se ni crtica ili donja crta, jer je to rezervirano za posebnu upotrebu).
• U nazivima klasa i identifikatora mogu se koristiti i velika i mala slova.
• Treba pripaziti na to da su nazivi klasa i identifikatora osjetljivi na velika i mala slova pa tako naziv mojaKlasa nije ekvivalentan nazivu mojaklasa.

 

Ako se naziv klase sastoji od dviju riječi, preporuča se da se one odvoje crticom (npr. moja-klasa), jer je to stil koji se također koristi i u nazivima CSS-svojstava (npr. font-size).

Ako nam to ne odgovara, mogu se koristiti i varijante mojaKlasa ili MojaKlasa.

U svakom slučaju, poželjno je dosljedno se držati odabranog stila imenovanja.

Također, prilikom imenovanja klasa i identifikatora poželjno je da imena budu jasna i razumljiva, ali da ipak ne budu preduga.

 

Kombiniranje naziva elementa, klase i identifikatora

 

Ako je potrebno, unutar selektora može se navesti i naziv elementa i klasa:

 

p.poslovica {

    color: red;

}

 

Gornje pravilo primijenit će se samo na p elemente s klasom poslovica, ali ne i na druge p elemente, niti na elemente h1 koji eventualno imaju klasu poslovica.

 

Slična kombinacija moguća je i s identifikatorom:

 

p#jutro {

    color: red;

}

 

Kombinacija koja se često može susresti su dvije (ili više) klasa u identifikatoru.

 

Naime, na HTML-element može se postaviti više klasa, što je ponekad korisno (npr. kad se element želi dodatno stilizirati).

 

Postavljanje više klasa na element u HTML-u izgleda ovako:

 

<p class="poslovica istina">Tko rano rani, dvije sreće grabi.</p>

 

Unutar atributa class različite su klase odvojene razmakom. Taj element tako ima dvije klase – klasu poslovica i klasu istina.

Kad se u CSS-selektoru žele navesti obje klase, navode se bez razmaka.

Važno je zapamtiti da se u selektoru prije naziva klase uvijek navodi točka: .

 

poslovica.istina {

    color: red;

}

 

Ovo pravilo primijenit će se samo na elemente koji imaju i jednu i drugu klasu. Ovo se pravilo može dodatno „pooštriti“ navođenjem da se ono odnosi samo na elemente p:

 

p.poslovica.istina {

    color: red;

}