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 |