Rozloženie textu a obsahu webových stránok pomocou kódu HTML je iba jednou „časťou“ budovy predná časť webovej stránky. Ďalšou veľkou časťou tohto procesu je vytváranie vizuálneho štýlu, ktorý sa riadi podľa pravidlá CSS.
Kedykoľvek vytvoríme nový web alebo urobíme zásadné zmeny v rozložení existujúceho, nevyhnutne požadujeme, aby konkrétne časti našich webových stránok vyzerali určitým spôsobom. Aby ste to dosiahli, je dôležité pochopiť, ako rôzne používať Kombinátory CSS, ako je selektor potomkov CSS. Tento kombinátor CSS umožňuje veľkým častiam webových stránok prijímať rovnaké zmeny štýlu naraz.
Čo je selektor potomkov CSS?
Selektor potomka CSS je jedným zo štyroch rôznych kombinátorov CSS. Pri pridávaní jednej medzery () medzi dva selektory sa rovnaké prvky štýlu použijú aj pre druhý selektor, pretože potomkovia zdieľajú rovnaký prvý selektor.
Aby ste pochopili selektor potomka CSS, musíte najskôr rozumieť selektorom CSS. Najlepším spôsobom, ako opísať selektor, je to, že ide o operátor CSS, ktorý identifikuje časť kódu HTML, ktorú sa pokúšate upraviť. Nazýva sa selektor, pretože „vyberá“ akýkoľvek kúsok kódu HTML, ktorý zdieľa rovnaký operátor ako rodič CSS.
Bežné príklady takýchto operátorov sú:
div
Toto je značka, ktorá definuje časť HTML, ktorá môže obsahovať napríklad odstavce a obsah, alebo:
li
čo je zoradený zoznam. Ďalšou podobnou značkou je:
ul
Takto sa vytvorí neusporiadaný zoznam. Zložitejšie vzory sa označujú aj ako selektory. Zjednodušene povedané, selektor potomka CSS povie webovej stránke, ako má vyzerať, keď je jeden selektor „vnorený“ pod spoločného predka.
Prvý selektor sa stáva rodičom CSS alebo selektor „predok“ a druhý selektor sa stáva potomkom. Popremýšľajte, ako funguje adresár súborov: rodič CSS je ako priečinok, ktorý obsahuje ďalšie priečinky, ktoré môžu obsahovať vlastné priečinky.
Zo štyroch kombinátorov jediný, ktorý vyberá všetko, čo je vnorené pod konkrétnym rodičom CSS, je selektor potomkov CSS. Existujú tri ďalšie kombinátory.
- Podradený selektor („>“ namiesto jedného medzery) vyberie iba prvky, na ktoré odkazuje prvý selektor v kombinátore. Ak je prvý selektor (div) a druhý selektor je (p), vyberie sa iba (p), pokiaľ má (div) ako predok. Ak je odsek vytvorený v novej časti (sekcii), aj keď je v rovnakej časti (div), pravidlá štýlu sa nezachovajú.
- Susedný výber súrodencov („+“ namiesto jedného priestoru) vyberie iba prvok, ktorý je najbližšie k druhému selektoru v kombinátore. Ak je prvý selektor (div) a druhý selektor je (p), je vybraný prvý prvok, ktorý používa (p), ale nie (div).
- Všeobecný výber súrodencov („~“ namiesto jedného medzery) vyberie všetky prvky okrem tých, na ktoré odkazuje druhý selektor. Ak je prvý selektor (div) a druhý selektor je (p), vyberie sa každý prvok, ktorý nie je (p).
Ako vyzerá Selektor potomkov CSS?
V nasledujúcom príklade dvoch rôznych potomkov selektora CSS pracujúcich vedľa seba je (div) prvý selektor v prvom kombinátore, zatiaľ čo (ul) je prvý selektor v druhom kombinátor. V oboch selektoroch potomkov CSS sa ako druhý selektor používa (p).
Prvky štýlu sa líšia medzi (div) a (ul), ale (p) v obidvoch prípadoch jasne nesie znaky svojho rodiča CSS.
Prečo používať selektor potomkov CSS?
Aby sme pochopili dôležitosť selektora potomka CSS, je cenné najskôr porozumieť vnoreným selektorom CSS.
Všeobecne chceme, aby sa na všetky webové stránky vzťahovali určité pravidlá štýlu, napríklad konkrétna veľkosť alebo písmo, ktoré predvolene používa všetok text v odseku (p). Rovnako môže HTML začať vyzerať chaoticky, ak sa tieto pravidlá štýlu použijú pre každý jednotlivý odsek a nie pre celý web.
Vnorené CSS je možné pomocou kombinátorov CSS, ako je selektor potomkov CSS. Vnorením CSS pod selektorom rodiča je možné rýchlo a efektívne povedať webovým stránkam ako má vyzerať konkrétny selektor v každom scenári, na ktorý sa odkazuje rodič CSS.
Používanie vnoreného selektora CSS nám umožňuje použiť rovnaké pravidlá na štýl viacerých častí webu naraz, čo nám umožňuje vystačiť si s menej prácou a zároveň zachovať čistý a nedotknutý kód HTML.