Kombinovanje selektora

Složeni selektori

Postoje situacije u kojima ne možemo da definišemo id ili klasu elementa ili se tagovi generišu dinamički. U tim situacijama, tražimo neke druge mogućnosti za selektovanje specifičnih elemenata. Na primer:

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title>Untitled Document</title>

</head>

<body>

<p>Paragraf ispod prvog naslova.</p>

<div>

<p>Paragraf ispod drugog naslova.</p>

</div>

</body>

</html>

Ukoliko želimo da na tag p koji se nalazi u okviru taga div primenimo odredjena pravila, a pritom ne želimo da time bude pogodjen i drugi p tag koji se nalazi odmah ispod otvarajućeg body taga, primenili bi sledeću sintaksu

<style>

div p{color:red;}

</style>

Ako kod iznad prikažemo u prozoru pretraživača, primetićemo da se pravilo crvene boje teksta primenilo samo na paragraph koji za roditeljski tag ima div tag.

Paragraf koji se nalazi izvan div-a a u okviru je body tag-a ostao je, po default podešavanjima većine pretraživača, u crnoj boji. Zašto je to tako? To je zbog načina na koji je selektovan element p

div p {color:red;}

Ovako napisan CSS selektor naziva se složenim. Šta on tačno govori? On govori pretraživaču da pronadje sve p elemente koji za roditeljski tag imaju div tag i na njih primeni pravilo color:red . Svi ostali tagovi koji NISU ugnjezdjeni unutar div taga, tj. nemaju div tag kao roditeljski, ne potpadaju pod ovo pravilo.

U ovom primeru isti efekat imao bi i tag napisan na sledeći način, zbog strukture samog HTML fajla:

div > p {color:red;}

Šta ovako napisan kod znači? Ovaj kod govori pretraživaču da pronadje sve p elemente čiji je roditelj div ali SAMO one kojima je div PRVI roditelj u nizu. Da bi razjasnili, napisaćemo kod u kome na p element neće biti primenjeno pravilo i pored toga što je jedan od njegovih roditelja div tag.

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title>Untitled Document</title>

<style>

div > p{color:red;}

</style>

</head>

<body>

<p>Paragraf ispod prvog naslova.</p>

<div>

<p>Paragraf na koji ce biti primenjeno CSS pravilo</p>

<header>

<p>Paragraf ispod drugog naslova.</p>

</header>

</div>

</body>

</html>

U ovom slučaju oba paragrafa zadržaće default crnu boju jer je predmetnom tagu p, div u ovom slučaju “deda” J a header blok element “tata” iako su u CSS žargonu oba elementa tipa “parent”.

Ako želimo da se i na ovako struktuiran html kod primeni promena boje taga p u crvenu, izostavićemo znak > pa će CSS kod biti napisan kao:

div p {color:red;}

Tada će predmetni p tag dobiti crvenu boju, nezavisno od toga u kom “kolenu” je div njegov roditelj

Da bi razjasnili kako neki element može da se posmatra kao roditeljski za neki drugi, usvojićemo prosto pravilo:

Svaki element koji se sadrži unutar otvarajućeg i zatvarajućeg taga nekog drugog elementa je dete tog elementa, tj. tag koji ga okružuje mu je roditelj.

Postoji još jedan način za nizanje selektora. Taj metod podrazumeva dodavanje znaka + izmedju prostih selektora. Ako se osvrnemo na prethodni primer, kod bi izgledao ovako

div + p {color:red;}

Ovako napisan selektor govori pretraživaču da primeni stil na sve p tagove koji neposredno slede iza otvarajućeg div taga. Za slučaj da je kod izgledao drugačije, na primer:

<div>

<h1>Naslov</h1>

<p>Paragraf ispod drugog naslova.</p>

</div>

stil ne bi bio primenjen zbog toga što se h1 tag nalazi izmedju njih, znači p nije direktni sledbenik taga div već se izmedju njih nalazi još neki (u ovom slučaju h1). Ako bi CSS bio redefinisan na sledeći nacin:

div h1 + p{color:red;}

postigli bi željeni rezultat jer ovaj kod kaže: primeni pravilo na tag p koji je direktni sledbenih taga h1 a koji se nalazi unutar div taga.

U ovom specifičnom slučaju nije potrebno navodjenje diva u selektoru, pa bi pravilo bilo primenjeno i u slučaju koda:

h1 + p{color:red;}

I još nešto. Treba primetiti da sintaksa

div + h1 + p {color:red;}

ne bi dovela do primene stila na p tag jer bi to značilo da div tag mora biti zatvoren pre otvaranja h1 taga, tj. bio bi primenjen u situaciji kada bi HTML struktura bila kao u primeru ispod:

<div></div>

<h1>Naslov</h1>

<p>Paragraf ispod drugog naslova.</p>

Čisto radi kompletnosti, elementi koje koristimo za kombinovanje više od jednog selektora nazivaju se kombinatori. Kombinatori su praznina, znak veće od (>) i znak plus (+), koje smo već obradili.

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn