CSS selektori

Već smo videli kako se više deklaracija grupiše u stil. Takođe smo videli i kako da primenimo takve stilove na naš HTML dokument. Naučili smo da to nije baš preporučljivo, ali isto tako i da ponekad možemo da pribegnemo tom rešenju.

Međutim, u najvećem broju slučajeva, pribeći ćemo drugačijoj strategiji - pripremićemo CSS stilove unapred, a onda ćemo ih samo koristiti u HTML-u!

Da bismo to uspeli da uradimo, mora postojati način da nekako "proglasimo" da se određeni stil primenjuje na neki HTML element. Ovo postižemo tako što stil kreiramo pod tzv. "selektorom". Selektor suštinski predstavlja pravilo koje web čitaču govori na koje HTML elemente se stil primenjuje.

Kada pripremamo CSS, to izgleda ovako:

selektor { deklaracija; deklaracija; ... }

Kao što vidimo, naše deklaracije se nalaze unutar vitičastih zagrada, a ispred svega se navodi selektor. Da se podsetimo - deklaracija se sastoji iz atributa i vrednosti, pa bismo pravilo mogli da napišemo i ovako:

selektor { atribut: vrednost; atribut: vrednost; ... }

U CSS-u je moguće napraviti i veoma kompleksne selektore kao npr. "kada miš dođe preko linka koji vodi na webnstudy.com u poslednjem pasusu div bloka koji se nalazi odmah posle podnaslova". Ipak, previše kompleksni selektori često vode nepredviđenom ponašanju i ponekad je bolje da umesto preterano komplikovanog selektora prosto uvedemo neku novu klasu.

Referentna lista CSS selektora

Ovde predstvaljamo kratku referencu selektora. Možete je koristiti da se brzo podsetite ili da pređete na deo teksta koji se odnosi na navedeni selektor.

Osnovni selektori
* Univerzalni selektor - odnosi se na sve elemente
oznaka HTML selektor - odnosi se na <oznaka> HTML elemente
.klasa Selektor klase - elementi sa zadatom klasom
#ident ID selektor - elemenat identifikovan kao ident
Složeni selektori
NAD POD Podelement - element koji se nalazi unutar drugog elementa
NAD > POD Neposredni podelement - element koji se nalazi neposredno unutar drugog elementa
PRE ~ POSLE Prateći element - element koji dolazi posle nekog elementa
PRE + POSLE Neposredno-prateći element - element koji dolazi odmah posle nekog elementa
Selektori po HTML parametru
[param] Selektor po parametru - elementi sa parametrom param
[param="vrednost"] Selektor po vrednosti parametra - elementi kojima parametar param ima zadatu vrednost
[param^="početak"] Selektor po početku vrednosti parametra - elementi čija vrednost param počinje sa početak
[param$="kraj"] Selektor po završetku vrednosti parametra - elementi čija se vrednost param završava sa kraj
[param*="deo"] Selektor po delu vrednosti parametra - elementi koji negde unutar vrednosti param imaju deo
[param~="vrednost"] Selektor po vrednosti parametra iz liste - elementi kod kojih je jedna od vrednosti iz param liste, zadata vrednost (lista je odvojena razmacima)
[param|="vrednost"] Selektor po vrednosti parametra praćenog crticom - elementi kod kojih je param jednak vrednost ili počinje sa vrednost-
Pseudo-klase
:link Neposećen link
:visited Posećen link
:hover Element nad kojim je miš
:active link (ili dugmence) u trenutku "klika"
:empty Odnosi se na prazan element
:target Bookmark element na koji nas je doveo link
:root Osnovni elemenat dokumenta, tj. <html> element
:not(X) Negacija selektora
:lang(X) Formatiranje elementa prema jeziku web stranice
Pseudo-klase prema mestu elementa
:first-child Odnosi se na element koji je prvi unutar nadređenog elementa
:last-child Odnosi se na element koji je poslednji unutar nadređenog elementa
:only-child Odnosi se na element koji je jedini unutar nadređenog elementa
:nth-child(x) Element koji je N-ti unutar nadređenog elementa
:nth-last-child(x) Element koji je N-ti od kraja unutar nadređenog elementa
:first-of-type Odnosi se na element ako je on prvi element određenog tipa
:last-of-type Odnosi se na element ako je on poslednji element određenog tipa
:only-of-type Odnosi se na element ako je on jedini element određenog tipa
:nth-of-type(x) Odnosi se na element ako je on N-ti element određenog tipa
:nth-last-of-type(x) Odnosi se na element ako je on N-ti element određenog tipa od kraja
Pseudo-klase elemenata forme
:focus Elemenat u fokusu
:enabled Elemenat u kome je dozvoljen unos
:disabled Elemenat u kome je zabranjen unos
:required Elemenat koji je obavezno uneti
:optional Elemenat koji nije obavezno uneti
:valid Elemenat u kome je sadržaj ispravno unet
:invalid Elemenat u kome je sadržaj pogrešno unet
:in-range Elemenat u kome je vrednost unutar zadatih granica
:out-of-range Elemenat u kome je vrednost izvan zadatih granica
:checked Checkbox koji je štikliran
:indeterminate Checkbox kome je postavljeno svojstvo indeterminate
:default Podrazumevani element forme
Pseudo-elementi
::first-letter Formatira prvo slovo teksta elementa
::first-line Formatira prvi red teksta elementa
::before Definiše novi tekst na početku elementa
::after Definiše novi tekst na kraju elementa
::selection Menja izgled selektovanog teksta u elementu
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.