CSS selektor klase i identifikacije

Verovatno najkorišćeniji način da se CSS stil primeni na HTML elemente je preko klase koja je dodeljena HTML elementima. Na taj način dodeljujemo isti stil većem broju elemenata, kome je podešena klasa pomoću class parametra.

Ako želimo da primenimo stil na samo jedan element na stranici, možemo upotrebiti ID selektor koji će primeniti CSS na element koji je jedinstveno identifikovan nekim nazivom. Ne zaboravite, identifikaciju možemo dodeliti bilo kom HTML elementu pomoću parametra id.

Selektor klase

Kada na HTML stranici imamo elemente kojima je dodeljena određena klasa, možemo kreirati stil baš za tu klasu. Sve što je potrebno je da CSS deklaracije grupišemo pod selektorom koji ima naziv te klase sa vodećom tačkom.

.klasa { deklaracija; ... } ... <oznaka class="klasa"> ... </oznaka> <oznaka class="klasa druga_klasa"> ... </oznaka> ...

Već znamo da jedan isti HTML element može pripadati različitim klasama. To praktično znači da istom elementu možemo dodeliti više stilova klase. Pri tom se oni "primenjuju" redosledom u kome su definisani unutar CSS-a.

Tačka je u stvari "operator" kojim se klasa dodeljuje nekom drugom selektoru. To znači da ona treba da služi za konkretizovanje nekog HTML selektora, tako što na njega još primenimo klasu elementa. Tako ispada da bi pravilno bilo:

element.klasa { deklaracija; ... }

Na ovaj način se CSS primenjuje samo na određeni element (npr. pasus) koji ima zadatu klasu.

Kada se klasa navede bez zadatog HTML selektora, u stvari se odnosi na univerzalni selektor koji se u tom slučaju podrazumeva.

.klasa { deklaracija; ... } JE ISTO ŠTO I: *.klasa { deklaracija; ... }

ID selektor

Ako na stranici imamo jedinstven element koji treba da izgleda drugačije od svih drugih, ne moramo da kreiramo klasu, već specijalan stil baš za taj jedan konkretan element. U tom slučaju se kao CSS selektor navodi jedinstvena identifikacija tog elementa predvođena "tarabom".

#identifikacija { deklaracija; ... } ... <oznaka id="identifikacija"> ... </oznaka>

Ne zaboravite da ovakav element takođe može imati i klasu ili čak više njih (što opet povlači stilove klase). ID selektor je uvek "jači" od selektora klase, što znači da se prvo primenjuju CSS-ovi na osnovu klase, a onda se primenjuje stil prema identifikaciji.

Više o class i id HTML parametrima pročitajte u tekstu Klasa i identifikacija HTML elementa.

Detaljnije o tome kako jedan selektor nadjačava drugi, možete pročitati u lekciji o pravilima primene CSS-a i specifičnosti selektora.

Primer

Ovde možemo videti kako se navode klase i identifikacije, kako u CSS-u, tako i u HTML-u.


  <style>
    .klasa {
      background-color: LightPink;
      color: red;
    }
    div.klasa {
      font-weight: bold;
    }
    #ident {
      color: blue;
    }
  </style>

  <p class="klasa">Pasus klase "klasa".</p>
  <p class="klasa" id="ident">Još jedan pasus klase "klasa", ali identifokovan kao "ident".</p>
  <div class="klasa">Div blok klase "klasa".</div>

p1

Evo još jednog primera gde možete eksperimentisati...

css-sel-klasa-id-sr
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies). Detaljnije o tome možete pročitati u tekstu o našoj politici privatnosti.