MENU

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řídyPseudo 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ů:

Kam dál

Kurz HTML a CSS | Seznam všech CSS vlastností

Pokud nevíte, neváhejte se zeptat

© HelpMark | Tomáš Herout | Tel: +420 739 719 548