Postavitev besedila in vsebine spletnega mesta s kodo HTML je le en "kos" gradnje sprednji del spletnega mesta. Še en velik del tega postopka je ustvarjanje vizualnega sloga, ki ga ureja pravila CSS.
Kadarkoli izdelamo novo spletno mesto ali naredimo večje spremembe postavitve obstoječega, neizogibno želimo, da so določeni deli našega spletnega mesta videti na določen način. Da bi to naredili, je pomembno razumeti, kako uporabljati različne Kombinatorji CSS, kot je izbirnik potomcev CSS. Ta kombinacija CSS omogoča, da veliki deli spletnega mesta prejmejo iste spremembe sloga hkrati.
Kaj je izbirnik potomcev CSS?
Izbirnik potomcev CSS je eden od štirih različnih kombinacij CSS. Ko dodate en presledek () med dvema izbirnikoma, bodo isti elementi sloga veljali tudi za drugi izbirnik, saj imajo potomci enak prvi izbirnik.
Da bi razumeli izbirnik potomcev CSS, morate najprej razumeti izbirnike CSS. Najboljši način za opis izbirnika je, da je operator CSS, ki prepozna kos HTML-ja, ki ga želite oblikovati. Imenuje se izbirnik, ker "izbere" kateri koli bit HTML si deli isti operater kot nadrejeni CSS.
Pogosti primeri takšnih operaterjev so:
div
To je oznaka, ki določa del HTML-ja, ki lahko vključuje stvari, kot so odstavki in vsebina, ali:
li
kar je urejen seznam. Druga podobna oznaka je:
ul
Tako se ustvari neurejen seznam. Bolj zapleteni vzorci se imenujejo tudi selektorji. Preprosto povedano, izbirnik potomcev CSS spletnemu mestu pove, kako naj izgleda, ko je en izbirnik ‘ugnezden’ pod skupnim prednikom.
Prvi izbirnik postane nadrejeni CSS ali izbirnik 'prednik', drugi izbirnik pa potomec. Pomislite, kako deluje imenik datotek: starš CSS je kot mapa, ki vsebuje druge mape, ki lahko vsebujejo svoje mape.
Od štirih kombinatorjev edini, ki izbere vse, kar je ugnezdenega pod določenim nadrejenim CSS, je izbirnik potomcev CSS. Obstajajo še trije kombinatorji.
- Podrejeni izbirnik (‘>’ namesto enega presledka) izbere samo elemente, na katere se sklicuje prvi izbirnik v kombinatorju. Če je prvi izbirnik (div) in drugi izbirnik (p), je izbran samo (p), če ima (div) kot prednika. Če je odstavek ustvarjen v novem (odseku), tudi če je v istem (div), se pravila za slog ne ohranijo.
- Sosednji izbirnik ("+" namesto enojnega presledka) izbere le element, ki je najbližji drugemu izbirniku v kombinatorju. Če je prvi izbirnik (div) in drugi izbirnik (p), je izbran prvi element, ki uporablja (p), ne pa (div).
- Splošni izbirnik sorodnikov (‘~’ namesto enega presledka) izbere vse elemente, razen tistih, na katere se sklicuje drugi izbirnik. Če je prvi izbirnik (div) in drugi izbirnik (p), je izbran vsak element, ki ni (p).
Kako izgleda izbirnik potomcev CSS?
V naslednjem primeru dveh različnih izbirnikov potomcev CSS, ki delujeta vzporedno, [div] je prvi selektor v prvem kombinatorju, medtem ko je (ul) prvi selektor v drugem kombinator. V obeh izbirnikih potomcev CSS je [p] uporabljen kot drugi izbirnik.
Elementi sloga se razlikujejo med (div) in (ul), vendar (p) v obeh primerih očitno nosi lastnosti svojega nadrejenega CSS.
Zakaj uporabljati izbirnik potomcev CSS?
Če želite razumeti pomen izbirnika potomcev CSS, je koristno najprej razumeti ugnezdene izbirnike CSS.
Na splošno želimo, da določena stilska pravila veljajo za celotno spletno mesto, na primer določeno velikost ali pisavo, ki jo privzeto uporablja vse besedilo odstavka (p). Podobno lahko HTML postane videti neurejen, če se ta stilska pravila uporabljajo za vsak posamezen odstavek in ne za celotno spletno mesto.
Vgnezdeni CSS je mogoč z uporabo kombinacij CSS, kot je izbirnik potomcev CSS. Če "ugnezdiš" CSS pod nadrejenim izbirnikom, lahko hitro in učinkovito poveš spletnemu mestu kako naj bi bil videti določen izbirnik v vsakem scenariju, na katerega se sklicuje nadrejeni CSS.
Uporaba ugnezdenega izbirnika CSS nam omogoča uporabo istih pravil za oblikovanje več odsekov spletnega mesta hkrati, kar nam omogoča, da se obnesemo z manj dela, hkrati pa ohranjamo naš HTML čist in neokrnjen.