Postavljanje teksta i sadržaja web stranice s HTML kodom samo je jedan "dio" izgradnje prednji kraj web stranice. Još jedan veliki dio ovog procesa je stvaranje vizualnog stila, kojim se upravlja pravila CSS-a.
Kad god napravimo novu web stranicu ili napravimo velike promjene izgleda postojeće, neizbježno želimo da određeni dijelovi naše web stranice izgledaju na određeni način. Da biste to učinili, važno je razumjeti kako koristiti razne CSS kombinatori, kao što je CSS selektor potomka. Ovaj CSS kombinator omogućuje velikim dijelovima web stranice da odjednom prime iste promjene stila.
Što je CSS selektor potomaka?
CSS selektor potomaka jedan je od četiri različita CSS kombinatora. Kada dodajete jedan razmak () između dva selektora, isti elementi stila također će se primijeniti na drugi selektor, s obzirom da potomci dijele isti prvi selektor.
Da biste razumjeli CSS selektor potomaka, prvo to trebate razumjeti CSS selektore. Najbolji način za opisivanje selektora je da je CSS operator koji identificira dio HTML-a koji pokušavate oblikovati. Nazvan je selektor jer "odabire" bilo koji bit HTML-a koji dijeli isti operator kao i CSS roditelj.
Uobičajeni primjeri takvih operatora su:
div
Ovo je oznaka koja definira odjeljak HTML-a, koji može sadržavati stvari poput odlomaka i sadržaja, ili:
li
što je uređeni popis. Još jedna slična oznaka je:
ul
Ovo stvara neuređeni popis. Složeniji obrasci nazivaju se i selektori. Jednostavno rečeno, CSS selektor potomaka web mjestu govori kako treba izgledati kada je jedan selektor "ugniježđen" ispod zajedničkog pretka.
Prvi selektor postaje CSS roditelj ili selektor ‘predak’, a drugi selektor postaje potomak. Zamislite kako funkcionira direktorij datoteka: CSS roditelj je poput mape koja sadrži druge mape koje mogu sadržavati vlastite mape.
Od četiri kombinatora, jedini koji odabire sve što je ugniježđeno ispod određenog CSS roditelja je CSS selektor potomaka. Postoje još tri kombinatora.
- Podređivač (">" umjesto pojedinačnog razmaka) odabire samo elemente na koje se odnosi prvi selektor u kombinatoru. Ako je prvi selektor (div), a drugi selektor (p), odabire se samo (p) sve dok ima (div) kao pretka. Ako se odlomak kreira pod novim (odjeljkom), čak i ako je u istom (div), pravila stila se neće zadržati.
- Susjedni birač brata ili sestre (‘+’ umjesto pojedinačnog razmaka) odabire samo element koji je najbliži drugom selektoru u kombinatoru. Ako je prvi selektor (div), a drugi selektor (p), odabire se prvi element koji koristi (p), ali ne i (div).
- Općeniti birač brata ili sestre (‘~’ umjesto jednog razmaka) odabire sve elemente osim onih na koje se poziva drugi selektor. Ako je prvi selektor (div), a drugi selektor (p), odabire se svaki element koji nije (p).
Kako izgleda CSS Descendant Selector?
U slijedećem primjeru dva različita CSS selektora potomaka koji rade usporedno, (div) je prvi selektor u prvom kombinatoru, dok je (ul) prvi selektor u drugom kombinator. U oba CSS selektora potomka, (p) se koristi kao drugi selektor.
Elementi stila razlikuju se između (div) i (ul), ali (p) očito nosi osobine svog CSS roditelja u oba slučaja.
Zašto koristiti CSS Birač potomka?
Da bismo razumjeli važnost CSS selektora potomaka, dragocjeno je prvo razumjeti CSS ugniježđene selektore.
Općenito želimo da se određena stilska pravila primjenjuju na cijelo web mjesto, poput određene veličine ili fonta koji sav tekst (p) teksta koristi prema zadanim postavkama. Isto tako, HTML može početi izgledati neuredno ako se ta pravila stila primjenjuju na svaki pojedini odlomak, a ne na cijelu web stranicu.
Ugnježđeni CSS moguć je upotrebom CSS kombinatora kao što je CSS selektor potomka. "Gniježđenjem" CSS-a ispod roditeljskog odabira moguće je brzo i učinkovito reći web mjestu kako bi trebao izgledati određeni selektor u svakom scenariju na koji se odnosi CSS roditelj.
Korištenje ugniježđenog CSS selektora omogućuje nam primjenu istih pravila za oblikovanje više odjeljaka web stranice odjednom, omogućujući nam da se snađemo s manje posla, a istovremeno održavamo naš HTML čistim i netaknutim.