Vzájemné zkombinování více druhů CSS selektorů a jejich vztahy v praxi
Znalost druhů selektorů je jedna věc (pozor, tento článek se druhy selektorů nezabývá, pokud ještě si ještě neprošli předchozí články, pak se vraťte postupně na články Základní selektory v CSS, Pseudo třídy a Pseudo elementy). Používání a kombinování selektorů v praktickém HTML kódu je ale věc druhá. V tomto pokračujícím článku se podíváme na nejčastější kombinace používání selektorů v praxi.
Ukázka HTML, na které budeme demonstrovat použití selektorů:
<menu id="hlavni-menu" class="cervena">
<ul>
<li><a href="/"> … </a></li>
<li>
<ul> … </ul>
</li>
</ul>
</menu>
<h1>Nadpis</h1>
<p>První odstavec</p>
<p>Druhý odstavec</p>
<div>
<p>Odstavec, který není potomkem h1</p>
</div>
Ukázka možností v CSS:
menu{background: #ccc;}
#hlavni-menu{border: 1px solid black;}
menu.cervena a{color: red;}
menu.cervena a:hover{color: blue;}
menu.cervena a[href^="http://"]:before,
menu.cervena a[href^="https://"]:before {content: "\f08e" }
menu > ul {display: flex;}
menu > ul > li > ul {display: none;}
h1 + p {background: gainsboro;}
h1 ~ p {color: black;}
Odkaz na příklad
https://www.w3schools.com/code/tryit.asp?filename=G1OZ8LRTGT95
Pozn.: nutno kliknout na RUN.
Vysvětlení ukázky řádek po řádku:
Použití samostatného selektoru
První řádek příkladu označuje selektorem všechny obecné značky <menu> … </menu> a určuje jim pravidlo šedivého pozadím pomocí hexadecimálního zápisu barvy. Toto pozadí budou mít všechna <menu> na stránce.
Použití výběru samostatného identifikátoru
Druhý řádek určuje rámeček, ale tentokráte prvkům jen id="hlavni-menu". V našem příkladu se jedná o stejný prvek, ale díky tomuto zápisu budou sice všechna <menu> s šedivým pozadím, ale jen toto jediné menu bude mít navíc i rámeček (tj. border: 1px solid black).
Využití kaskádovitosti CSS v praxi
Třetí řádek se selektorem menu.cervena a již kombinuje několik způsobů zápisů. Vzhled bude ovlivněn vždy pouze u posledního druhu selektoru (tak je to v CSS vždy), v našem příkladu tedy bude ovlivněna HTML značka <a>. Předcházející zápis však říká, že bude ovlivněno pouze to <a>, které má svého předka (je vnořeno) do značek <menu> … </menu>, přičemž vůbec nezáleží na tom, kolik je mezi nimi jiných značek (tagů), avšak pouze těch <menu>, která mají současně i class="cervena". Pro jiná <menu> a jiné <a> tato pravidla neplatí. Ve třídě class by mohly být i jiné názvy, to by pravidlu selektoru nevadilo.
Použití pseudo-classes v kaskádovitosti
Řádek:
menu.cervena a:hover{color: blue;}
Demonstruje změnu barvy písma po umístění kurzoru myši na tag <a>, ale jen takový, který je vnořen (je potomkem) <menu class="cervena">. Pseudo-classes hover je popsán zde.
Skládání více selektorů za sebe
Řádky:
menu.cervena a[href^="http://"]:before, menu.cervena a[href^="https://"]:before {content: "\f08e" }
ukazují prakticky použitelný příklad, kdy dva selektory, oddělené od sebe čárkou, mohou ovlivňovat jednu skupinu CSS vlastností. Toto lze samozřejmě používat i u jiných typů selektorů. Např. pokud potřebujete nastylovat tlačítka do webu, tak je můžete jednotně použít pro: <input type="submit">, <input type="reset">, <button>…
Využití kaskádovitosti CSS se sledováním hloubky
Řádek se selektorem menu > ul má sice obdobný princip, ale oproti třetímu řádku zde už sledujeme hloubku. Také dojde k ovlivnění posledního selektoru v tomto případě <ul>, ale jen za situace, pokud není žádný jiný prvek mezi nimi. Jinými slovy <ul> musí být přímým potomkem <menu>. jinak selektor fungovat nebude. To zápis zajišťuje pomocí značky > (je menší).
Následující řádek menu > ul > li > ul ukazuje možnost podmínit celou rodičovskou strukturu. Opět je pochopitelně ovlivněn jen poslední prvek, tedy ul.
Zápis selektoru vyhledávající prvního sourozence
Řádek:
h1 + p {background: gainsboro;}
ovlivní to <p>, které bude v pořadí prvním sourozencem po <h1>. Druhé a všechny další <p> už neovlivní. Tento konkrétní příklad se může hodit pro grafické oddělení prvního úvodního odstavce od zbytku textů.
Zápis selektoru vyhledávající všechny prvky v sourozeneckém vztahu
Řádek:
h1 ~ p
ovlivní nejen první <p> následující po <h1>, ale ovlivní všechny <p>, pokud mají sourozenecký vztah s <h1> ale nejsou hlouběji vnořené, tj. nejsou vzdálenějšími potomky. Tag <p>, který by byl vnořen třeba do <div> už by tímto druhem zápisu ovlivněn nebyl.
Další selektory
Aby nebyl článek příliš dlouhý, tak další návody jsme umístili do těchto předcházejících článků:
- Základní CSS selektory, které předcházejí tomuto článku naleznete zde.
- Pseudo-classes které předcházejí tomuto článku naleznete zde.
- Pseudo-elements jsou virtuální elementy vytvořené pomocí CSS. Článek zde.