CSS – Kontekstualni selektori (I deo)

Nakon upoznavanja sa metodama kreiranja CSS stilova za linkove, uz pomoć alatki Dreamweaver-a, preći ćemo na kreiranje višestrukih stilova za linkove. U prethodnom CSS serijalu saznali smo kako se definišu stilovi za selektore: a:link, a:visited, a:hover i a:active. Ovi stilovi govore browser-ima kako da interpretiraju bilo koji link na stranici. Ali, šta raditi kada vam je potrebno da browser jedne linkove predstavi na jedan način, a druge na drugi način?

Na svu sreću standardima CSS-a obezbeđeno je i ono što nazivamo kontekstualnim selektorima. Šta predstavljaju kontekstualni selektori? Njih ćemo objasniti preko banalnog primera; recimo, vaše dete se igra na igralištu ljuljajući se na ljuljašci, vaše drugo dete igra igre na računaru, a vi svake nedelje igrate fudbal. Ovo su primeri korišćenja reči (u ovom slučaju glagola) igrati u različitim kontekstima, u svakodnevnom govornom jeziku. Ako bismo ovo preveli na CSS, dobili bismo sledeća pravila:

.ljuljaska igra { rekvizit: ljuljaska }

.racunar igra  { rekvizit: quake }

.fudbal igra     { rekvizit: lopta }

Kao što vidite, kako konteksti omogućavaju proširenje jezika, tako i proširuju moć CSS stilova. Razmotrite sledeći scenario.

Na primer, upravo kreirate novi izgled za vaš web sajt, koji će biti organizovan u dve kolumne (tabela sa dve kolone). Pri tome, želite da leva kolona bude šira i da sadrži glavninu tekstualnog dela. Desna kolona je mnogo uža i uglavnom sadrži linkove ka drugim sadržajima. Leva kolona će imati crni tekst na beloj podlozi, a desna kolona će biti tamno siva sa belim tekstom. Kreirali ste podrazumevani stil za sve linkove na stranici, ali taj stil neće zadovoljiti uslov čitljivosti teksta u obema kolonama. Rešenje se sastoji u kreiranju različitih stilova za svaku od kolona, tj. za linkove u tim kolonama. Upravo ovde, na scenu stupaju kontekstualni selektori. Pre nego što krenemo sa definisanjem kontekstualnih selektora, potrebno je da odradimo nekoliko pripremnih radnji, tj. da kreiramo nekoliko selektora klasa. Ovi selektori će biti primenjeni na odgovarajuće kolone radi stvaranja relacije između kolona i kontekstualnih klasa za linkove.

Pratite Krstaricu i preko mobilne aplikacije za Android i iPhone.