CSS selektor

Razlikujemo tri tipa selektora:

navodeći ime HTML taga,
navodeći klasu elemenata i,
navodeći identifikacionu vrednost (ID) elementa.

Ime taga

Kad definišemo navodeći ime HTML taga onda će opis uticati na sve elemente u dokumentu koji su definisani takvim imenom taga. To izgleda ovako:

body { svojstvo: vrednost; ... }

Medjutim nije na odmet napomenuti vrlo bitno CSS pravilo. Naime, možemo mi definisati da svi pasusi budu na primer u crvenoj boji i to na svim stranicama, ali ako recimo želimo baš neki konkretan pasus da bude u plavoj boji onda možemo definisati i taj konkretan pasus, na primer preko ID (malo ispod objasnićemo ID).

CSS klasa

CSS klasa se pravi tako što se stavi tačka pa odma napiše neko ime na primer ImeKlase, a ostalo je isto:

.ImeKlase { svojstvo: vrednost; ... }

I kasnije u HTML kodu tu klasu sa tim imenom možemo stavljati u različitim HTML tagovima kao atribute, a osobine će biti one koje su definisane u klasi. Evo primera:

<p class="imeKlase">...</p> <div class="imeKlase">...</div> ...

Medjutim ako želimo da nam samo za paragrafe važe svojstva klase onda pišemo:

p.ImeKlase { svojstvo: vrednost; ... }

Kasnije u HTML kodu u paragrafima ne moramo navoditi atribut class jer će automatski da se podrazumeva. Obratite peažnju da upravo to razlikuje klase od identifikacione elemente koje ćemo odma ispod proučiti. Medjutim pomoću klasa mogu da se ugnježđuju selektori , kao i praviti pseudo klase, a to se ne može postići identifikacionim elementima takodje.

Identifikacioni element

Identifikacioni element se piše sa id (ili velikim slovima ID) u HTML kodu unutar tagova kao atribut. Identifikacioni element se definiše samo jednom unutar CSS koda, znači mora biti jedinstven unutar CSS koda. To jest može postojati samo jedan identifikacioni element sa određenom identifikacionom vrednošću. Identifikaciona vrednost (u našem slučaju ispod smo je imenovali sa "prvi") se imenuje sledećim pravilima:

Vrednost mora početi slovom (može i brojem ili da bude samo broj, ali mozilla firefox brauzer ne podržava takvo imenovanje).
Nakon početnog slova mogu da slede brojevi, slova, ili razne kombinacije slova sa brojevima ili znacima kao što su: Znak minus "-", donja crta "_", dve tačke ":", i tačka "."
Vrednosti su osetljive na mala i velika slova.

Ajde da definišemo jedan identifikacioni element sa vrednošću na primer "prvi":

#prvi {color: red; text-align: center}

Kao što vidimo CSS identifikacioni element se definiše tako što prvo pišemo znak tarabu, pa onda vrednost identifikacionog elementa i zatim u vitičastim zagradama pišemo svojstva. E sad, unutar HTML tagova, kao što smo već pisali, identifikacioni element shvatite kao atribut, odnosno pišemo:

<p ID="prvi">Moja prva CSS lekcija</p>

A može se ubaciti i u nekom drugom tagu u istom HTML dokumentu:

<div id="prvi">Moja prva CSS lekcija</div>

Ovaj će, dakle, opis uticati na sve HTML tagove koji imaju id="prvi".