Rozložení textu a obsahu webu pomocí kódu HTML je jen jedním „kusem“ stavby přední část webové stránky. Další velkou částí tohoto procesu je vytvoření vizuálního stylu, který se řídí pravidla CSS.
Kdykoli vytváříme nový web nebo provádíme zásadní změny v rozložení stávajícího, nevyhnutelně chceme, aby určité části našeho webu vypadaly určitým způsobem. Za tímto účelem je důležité pochopit, jak používat různé CSS kombinátory, jako je selektor potomka CSS. Tento kombinátor CSS umožňuje velkým částem webových stránek přijímat stejné změny stylu najednou.
Co je Selektor potomků CSS?
Selektor potomků CSS je jedním ze čtyř různých kombinátorů CSS. Když přidáte jednu mezeru () mezi dva selektory, stejné prvky stylu se použijí také pro druhý selektor, protože potomci sdílejí stejný první selektor.
Abyste porozuměli selektoru potomka CSS, musíte nejprve rozumět selektorům CSS. Nejlepší způsob, jak popsat selektor, je to, že se jedná o operátor CSS, který identifikuje část HTML, kterou se pokoušíte stylovat. Nazývá se selektor, protože „vybírá“ jakýkoli bit HTML sdílí stejný operátor jako rodič CSS.
Běžné příklady takových operátorů jsou:
div
Toto je značka, která definuje část HTML, která může obsahovat například odstavce a obsah, nebo:
li
což je seřazený seznam. Další podobná značka je:
ul
Tím se vytvoří neuspořádaný seznam. Složitější vzory se označují také jako selektory. Jednoduše řečeno, volič potomka CSS řekne webu, jak má vypadat, když je jeden selektor „vnořený“ pod společného předka.
První selektor se stane rodičem CSS nebo selektorem „předchůdce“ a druhým selektorem se stane potomek. Přemýšlejte o tom, jak funguje adresář souborů: rodič CSS je jako složka, která obsahuje další složky, které mohou obsahovat vlastní složky.
Ze čtyř kombinátorů je jediný, kdo vybírá vše, co je vnořeno pod konkrétním rodičem CSS, selektor potomků CSS. Existují tři další kombinátory.
- Podřízený selektor („>“ místo jednoho prostoru) vybírá pouze prvky, na které odkazuje první selektor v kombinátoru. Pokud je první volič (div) a druhý volič je (p), je vybrán pouze (p), pokud má (div) jako předchůdce. Pokud je odstavec vytvořen pod novým (oddílem), i když je ve stejném (div), pravidla stylu nejsou zachována.
- Sousední volič sourozenců („+“ místo jednoho prostoru) vybírá pouze prvek, který je nejblíže druhému selektoru v kombinátoru. Pokud je první volič (div) a druhý volič je (p), je vybrán první prvek, který používá (p), ale ne (div).
- Obecný volič sourozenců („~“ místo jednoho mezerníku) vybírá všechny prvky kromě těch, na které odkazuje druhý volič. Pokud je první volič (div) a druhý volič je (p), je vybrán každý prvek, který není (p).
Jak vypadá výběr potomka CSS?
V následujícím příkladu dvou různých voličů potomků CSS, kteří pracují vedle sebe, je (div) první selektor v prvním kombinátoru, zatímco (ul) je první selektor ve druhém kombinátor. V obou selektorech potomků CSS se jako druhý selektor používá (p).
Stylové prvky se liší mezi (div) a (ul), ale (p) v obou případech jasně nese znaky svého rodiče CSS.
Proč používat volič potomků CSS?
Abychom pochopili důležitost selektoru potomka CSS, je cenné nejprve porozumět vnořeným selektorům CSS.
Obecně chceme, aby se určitá pravidla stylu vztahovala na všechny webové stránky, například na konkrétní velikost nebo písmo, které ve výchozím nastavení používá veškerý text odstavce (p). Podobně může HTML začít vypadat chaoticky, pokud jsou tato pravidla stylu použita pro každý jednotlivý odstavec, spíše než pro celý web.
Vnořené CSS je možné pomocí kombinátorů CSS, jako je selektor potomků CSS. „Vnořením“ CSS pod nadřazeným selektorem je možné rychle a efektivně sdělit web jak má vypadat konkrétní selektor v každém scénáři, na který je odkazován rodič CSS.
Použití vnořeného selektoru CSS nám umožňuje aplikovat stejná pravidla na stylování více sekcí webu najednou, což nám umožňuje vystačit si s méně prací a zároveň zachovat náš HTML čistý a nedotčený.