Selektory
V CSS jazyce se můžete setkat s třemi typy selektorů, samotný selektor představuje HTML tág nebo skupinu HTML tágu.
Jednoduchý selektor
Jednoduchý selektor se skládá s jediného HTML tágu. Příklad představuje použití a nastavení parametrů pouze u všech HTML tágu DIV
.
Příklad:
div { color: #008000; font-family: Arial CE; }
Násobení selektoru
Násobný selektor se skládá z většího počtu HTML tágu, které musí být odděleny oddělovačem klasické čárky ",
". Použití tohoto selektoru je hlavně tam kde se stejné parametry CSS stylu překrývají u různých HTML tágu. Níže uvedu dva odlišné, ale zcela shodné příklady.
Příklad:
/* klasické použití */ h1 { background-color: black; color: yellow; text-align: center; } h2 {text-align: center; } h3 { text-align: center; } div { background-color: black; color: yellow; } /* zjednodušeně */ h1, h2, h3 { text-align: center; } h1, div { background-color: black; color: yellow; }
Násobení kontextuálními selektory
Někdy se vyskytne potřeba zadat některý HTML tág jen v předem určeném HTML tágu a to jen za podmínky, že se v takovém HTML tágu vyskytuje. Dále také můžete využít násobení kontextuálních selektorů, které musí být odděleny čárkou ",
". Níže uvedu dva příklady použití kontextuálního selektoru.
Příklad:
p strong { font-size: 14pt; } div em, h1 strong, span { color: red; }
Vysvětlení:
První příklad, jestliže se v HTML tágu P
vyskytne HTML tág STRONG
bude tento HTML tág STRONG
nastaven zadaným kaskádovým stylem.
Druhý příklad, jestliže se v HTML tágu DIV
vyskytne HTML tág EM
bude nastaven zadaným kaskádovým stylem, jestliže se v HTML tágu H1
vyskytne HTML tág STRONG
bude nastaven zadaným kaskádovým stylem, všechny HTML tágy SPAN
budou nastaveny zadaným kaskádovým stylem.