CSS – selektory

Selektory jsou základním stavebním kamenem kaskádových stylů. Určují totiž, na jaké elementy se má styl aplikovat a na jaké ne. Existuje mnoho různých selektorů a s nimi také mnoho různých způsobů, jak zaměřit tu část dokumentu, kterou chceme stylovat.

CSS se skládá ze selectoru a definice neboli deklarace nebo více definicí. Styl se skládá z pravidel pro jednotlivé elementy, které mají být formátovány. Každé takové pravidlo má dvě části:

selektor (název elementu, pro který má toto pravidlo platit)
deklaraci (co pro něj má platit). V deklaraci určujeme vlastnost a její hodnotu, deklarace je uzavřena do složených závorek. Celé to zapisujeme takto:

selektor {vlastnost: hodnota vlastnosti}
h1 {color: blue}

Selektorem, tedy elementem, který formátujeme je zde h1 (nadpis 1. úrovně). Deklarací je {color: blue}. Ta určuje, že vlastnost color bude mít hodnotu blue. Celé dohromady to tedy znamená, že všechny nadpisy 1. úrovně v dokumentu budou mít modrou barvu.

Pokud budeme chtít určit elementu více než jednu vlastnost, jednotlivé vlastnosti od sebe oddělíme středníkem. Takto můžeme definovat libovolné množství vlastností

.selektor {
  vlastnost1: hodnota_vlastnosti1; 
  vlastnost2: hodnota_vlastnosti2;
}

Samozřejmě je možný i zápis každé vlastnosti zvlášť, ale to je zbytečné.

Jednoduchá a vícenásobná deklarace

Vlastnosti CSS lze přiřadit buď jedinému selektoru nebo více selektorům. Jednoduchá deklarace přiřazuje styl jednomu selektoru, vícenásobná deklarace přiřazuje styl více selektorům odděleným čárkou.

selektor 1 {deklarace vlastnosti}
p {color: red} - styl se použije pouze na daný element

selektor 1, selektor 2, selektor 3 {deklarace vlastnosti}
h1, h2, h3 {color: blue} - styl se použije na všechny definované elementy

Univerzální selektor `*`

Pomocí univerzálního selektoru lze pro stylování vybrat jakýkoliv element v dokumentu. Odpovídá nejvyššímu patru hierarchie dokumentu.

* {deklarace vlastnosti}
* {margin: 0; paddding: 0}

Za zmínku zde určitě stojí to, že hvězdičkou vybíráme i tag <body>, což může být občas na obtíž. Kdybychom nastavili u tohoto selektoru vlastnost background s hodnotou např. blue, tak uvidíme, že se nám celá stránka přebarví na modro. My si ale pro demonstraci zvolíme barvu písma zelenou. Tento styl přidáme do našeho CSS souboru:

* {color: green;}

Nadpis i odstavce se v prohlížeči ukáží v zelené barvě. Stejnou barvu textu by dostaly i další elementy, které by v HTML dokumentu byly.

Typový selektor

Nejjednodušším je tzv. typový selektor, který vybere všechny elementy námi uvedeného typu a přidá jim styl. Přidáme zelenou barvu všem odstavcům. Stačí nám přidat pouze jeden řádek do našeho CSS souboru:

element {deklarace vlastnosti}
p {color: green;}

Všechny odstavce jsou zabarvené zeleně, ale nadpis <h1> nikoliv.

Selektor následníka

Vybere druhý definovaný element – následníka, jenž je vnořen do prvně definovaného elementu – předka. A to bez ohledu na hloubku vnoření, resp. na vzdálenost mezi oběma elementy v hierarchii dokumentu.

předek následník {deklarace vlastnosti}
div.obrazek img {float: left;}

Styl se použije pouze na element img, jenž je vnořen do elementu div s třídou obrazek. CSS3 označuje tento typ selektoru jako kombinátor.

Selektor potomka

Vybere druhý definovaný element – potomka, jenž je vnořen do prvně definovaného elementu – rodiče. Mezi oběma elementy musí být přímý vtah, tzn. potomek je přímým potomkem rodiče.

předek > následník {deklarace vlastnosti}
p > strong {color: green;}

Styl se použije pouze na element strong, jenž je přímým potomkem elementu p. Pokud by byl element strong vnořen ještě do nějakého jiného lementu než p – tzn. nebyla by mezi nimi přímá vazba, styl by se nepoužil.

Selektor sousedícího sourozence

element 1 + element 2 {deklarace vlastnosti}
h1 + p  {text-indent: 0;}

Styl se použije pouze na odstavec, který bezprostředně následuje nadpis první úrovně. Jakékoliv další odstave toto pravidlo CSS neovlivní. CSS3 označuje tento typ selektoru jako kombinátor.

Selektor obecného sourozence

Vybere k formátování pouze druhý definovaný element, který je sourozencem prvně definovaného elementu. Oba elementy musí ležet za sebou na stejné úrovni v hierarchii dokumentu a musí mít stejný nadřazený element – stejného rodiče, ale na rozdíl od selektoru sousedícího sourozence není nutné, aby druhý element následoval přímo element první.

element 1 ~ element 2 {deklarace vlastnosti}
h3 ~ p  {font-size: 80%;}

Styl se použije pouze na všechny odstavce, které následují nadpis třetí úrovně, s nímž jsou v sourozeneckém stavu – mají stejné rodiče. Styl se nepoužije na žádný odstavec obsažený ve zdrojovém kódu dříve než nadpis třetí úrovně. CSS3 označuje tento typ selektoru jako kombinátor.

Selektor parametrů (atributů)

Vybere k formátování pouze ten definovaný element, jenž obsahuje definovaný parametr, nebo jeho hodnoty, případně její část.

element[parametr] {deklarace vlastnosti}
Vybere element s definovaným parametrem bez ohledu na hodnotu.

element[parametr=hodnota] {deklarace vlastnosti}
Vybere element s definovaným parametrem a jeho přesnou hodnotu.

element[parametr~=hodnota] {deklarace vlastnosti}
Vybere element s definovaným parametrem, jenž obsahuje více hodnot a jednou z hodnot je hodnota definovaná v zápisu selektoru.

element[parametr|=hodnota] {deklarace vlastnosti}
Vybere element s definovaným parametrem, jenž obsahuje více hodnot a tento výčet hodnot začíná definovanou hodnotou.

element[parametr1][parametr2] {deklarace vlastnosti}
Vybere element s definovanými parametry a případně i s jejich hodnotami.

element[parametr^řetezec] {deklarace vlastnosti}
Vybere element s definovaným parametrem, jehož hodnota začíná definovaným řetězcem.

element[parametr$řetezec] {deklarace vlastnosti}
Vybere element s definovaným parametrem, jehož hodnota končí definovaným řetězcem.

element[parametr*řetezec] {deklarace vlastnosti}
Vybere element s definovaným parametrem, jehož hodnota obsahuje alespoň jednou vybraný řetězec.

Příklady:

a[title="odkaz"]  {color: red;}
Styl se použije pouze na elementy a, jež obsahuje parametr title s hodnotou odkaz.Ostatní odkazy nebudou tímto pravidlem dotčeny.

span[lang|="en"]  {font-style: cursive;}
Styl se použije na všechny elementy span s parametrem lang, jehož hodnoty začínají řetězcem en. Styl se použije v případě, kdy bude parametr lang obsahovat hodnotu en-us, ale stejně tak, když bude obsahovat hodnotu en-uk.

p[class*="odst"] {color: red;}
Styl se použije na všechny odstavce s parametrem class, jejichž hodnota obsahuje alespoň jednou definovaný řetězec. Použije se v případě, kdy jde o hodnotu odstavec1, odstavec2 i pododstavec.

Uvozovky kolem hodnoty parametru jsou v zápisu CSS volitelné, pokud nebude hodnota obsahovat prázdnou mezeru.

Selektor třídy `.`

K formátování vybírá pouze ten element v dokumentu, jenž je označen třídou – hodnota parametru class.

.třída {deklarace vlastnosti}
Takto definovanou třídu lze použít na jakýkoliv element.

element.třída {deklarace vlastnosti}
Takto definovanou třídu lze použít pouze na specifický element.

Příklad:

Přesuneme se do HTML dokumentu, kde si upravíme element prvního odstavce. Přidáme mu třídu .zelena:

<p class="zelena">První odstavec</p>

Budeme mu chtít dát zelenou barvu textu. CSS soubor bude vypadat následovně:

.zelena {color: green;}

Selektor identifikátoru `#id`

K formátování vybírá definovaný element, který je v dokumentu označen daným identifikátorem. Podle specifikace CSS lze jedním identifikátorem v jednom dokumentu označit pouze jeden element.

Identifikátor (#id) je takový konkrétnější selektor. Má totiž větší prioritu než třída a používá se spíše pro JavaScript nebo odkazy na stránce. Deklaruje se pomocí hashtagu v CSS souboru, zbytek je ale stejný jako u tříd.

#id {deklarace vlastnosti}
#copyright {font-size: 80%;}
Styl se použije pouze na elementy div označené identifikátorem copyright.

V HTML dokumentu jej potom vkládáme do atributu HTML elementu: id="nazev-id". Vyzkoušíme si vytvořit identifikátor pro červenou barvu, kterou přidáme prvnímu odstavci:

<p id="cervena" class="zelena tucne">První odstavec.</p> 
<p class="tucne">Druhý odstavec.</p>

Do CSS souboru jsme přidali identifikátor s názvem #cervena, který udává červenou barvu písma:

.zelena {color: green;} 
.tucne {font-weight: bold;} 
#cervena {color: red;}

Ve výsledku můžeme vidět, že priorita identifikátorů existuje a také funguje.
Soubor CSS se čte odshora dolů. Pokud tedy chceme „přepsat“ již deklarovaný styl, vložíme ho nakonec (musí být níže, než původní).

Selektor pseudotřídy

K formátování vybírá definovaný element na základě události v dokumentu, kterou ovládá uživatel. Pseudo-selektory jsou výborná věc, která usnadňuje spoustu práce.

selector:pseudotřída {deklarace vlastnosti}
a:hover {text-decoration: underline}

`:active`

Patří mezi dynamické pseudotřídy, jež ovlivňují elementy na základě událostí. Pseudotřída active se aktivuje ve chvíli, kdy je daný element aktivován – stisknutím nebo držením myši. V tu chvíli se použije styl definovaný pro daný element s touto pseudotřídou.

a:active {background: silver}

Při aktivaci odkazu se vykreslí stříbrné pozadí.

`:after`

slouží ke vkládání externího obsahu za element.

cite:after {content: "citace"}

Za element cite se vloží definovaný řetězec.

`:before`

slouží ke vkládání externího obsahu před element.

cite:before {content: "Citace:"}

Před element cite se vloží definovaný řetězec.

`:hover`

Vlastnost :hover můžeme použít prakticky na jakýkoliv HTML element. Funkce téhle vlastnosti je, že po najetí na konkrétní element se změní jeho vlastnost, kterou deklarujeme. Vyzkoušíme si přidat :hover na náš nadpis, aby se po najetí na něj změnila jeho barva na zeleno. CSS bude vypadat následovně:

.zmen-barvu:hover {color: green;}

v CSS jsme vytvořili třídu .zmen-barvu a přidali k ní pseudo-selektor :hover a ještě nakonec vlastnost s hodnotou, na kterou se má změnit.
V HTML přidáme nadpisu naši vytvořenou třídu:

<h1 class="zmen-barvu">CSS3 selektory</h1>

Po najetí na nadpis CSS3 selektory se nadpis zabarví na zeleno.

`:first-child`

Dalším pseudo-selektorem je :first-child, který najde první element daného typu a přidá mu nějaký styl. Pro naši ukázku si ještě přidáme do HTML tagy <div></div>, kterým obalíme všechny odstavce:

<body>     
  <h1>CSS3 selektory</h1>     
  <div>        
    <p>První odstavec.</p>        
    <p>Druhý odstavec.</p>        
    <p>Třetí odstavec.</p>        
    <p>Čtvrtý odstavec.</p>     
  </div> 
</body>

Následně upravíme CSS soubor a to přidáním následujícího pseudo-selektoru:

div :first-child {color: red; }

První element v tagu <div> obarvil na červeno.

`:nth-child(x)`

Další v pořadí je :nth-child(x), který říká, kolikátý element daného typu vybíráme. Je zde několik variant zápisu, které se liší hodnotou v závorkách. Konkrétní číslo, jak již bylo řečeno, říká, kolikátý element se vybere. Tudíž, když zvolíme číslo 2, tak se nám vybere druhý element. Pro výběr druhého odstavce v divu by byl zápis v našem CSS souboru následovný:

div p:nth-child(2) {color: green;}

Ale to je pouze základní varianta. Také si můžeme říci, že chceme vybrat každý druhý element:

div p:nth-child(2n+0) {color: green;}

Zápis 2n nám říká, že vybíráme n-tý prvek, v našem případě druhý a +0 označuje začátek počítání. Výsledkem je zelené písmo pro každý druhý odstavec v našem divu. Když bychom změnili 0 na 1, neboli odkud se má začít počítat, tak výsledkem by bylo zelené písmo pro každý druhý odstavec, ale začínalo by se od prvního odstavce.

Dalším způsobem, lehčím a hojně využívaným, je označení jako odd (lichý) nebo even (sudý). Je to stále stejný zápis, pouze místo číselných hodnot používáme tyto dvě slovní označení.

Ukážeme si to nyní na krásném příkladu. Budeme chtít vypsat zeleně každý lichý odstavec pomocí hodnoty odd a každý druhý odstavec modře pomocí 2n+0. Kód bude vypadat následovně:

div p:nth-child(odd) {color: green;} 
div p:nth-child(2n+0) {color: blue;}

Po přidání CSS a aktualizaci stránky bychom měli mít liché odstavce zeleně a sudé modře. Toto stylování se hojně využívá u tabulek, každý řádek tabulky se dá tak lehce rozlišit.

Selektor pseudoelementu

K formátování vybírá takový element, který netvoří značkovací jazyk, ale CSS samotné. Pseudoelement je tedy třeba identifikovat přímo ve zdrojovém dokumentu, ale pouze pomocí CSS. S pseudoelementem pak CSS zachází stejně jako s klasickým elementem.

element:pseudoelement {deklarace vlastnosti}
p:first-letter {font-size: 200%}
Styl se použije na část elementu p definovanou pseudoelementem first-letter. První písmeno odstavce bude větší.

Cvičení

C1 – typový selektor

Vytvořte HTML soubor index.html a externí css soubor style.css, který zanoříte do složky css. Oba soubory navzájem provážte.

HTML soubor – vložte libovolný text a naformátujte jej následovně:

alespoň 4 odstavce textu,
alespoň 1 nadpis první a 2 nadpisy druhé úrovně,
alespoň dva odkazy,
alespoň 1 obrázek.

Do externího style.css přidejte pomocí typového selektoru následující kód:

p {color: blue;}
h1 {text-align : center; font-size: 50px;}
a {color: red; text-decoration: underline;}

C2 – univerzální selektor

Využijte html a css soubor z předchozího cvičení C1.

Do externího style.css přidejte pomocí univerzálního selektoru následující kód:

* {margin: 0; paddding: 0}

C3 – selektor třídy

Využijte html a css soubor z předchozího cvičení C2.

Do html souboru index.html přidejte následující kód:

<p class="right">První odstavec - zarovnání doprava.</p>
<p class="zelena tucne">Druhý odstavec</p>

Do externího style.css přidejte pomocí selektoru třídy následující kód:

.right {text-align: right;}
.zelena {color: green;} 
.tucne {font-weight: bold;}

C4 – selektor identifikátoru

Využijte html a css soubor z předchozího cvičení C3.

Do html souboru index.html přidejte následující kód:

<p id="cervena" class="zelena tucne">První odstavec.</p> 
<p class="tucne">Druhý odstavec.</p>

Do externího style.css přidejte následující kód:

.zelena {color: green;} 
.tucne {font-weight: bold;} 
#cervena {color: red;}

C5 – souhrnné procvičování

Do složky C5 Vytvořte HTML soubor index.html a externí css soubor style.css, který zanoříte do složky css. Oba soubory navzájem provážte.

HTML soubor – vložte libovolný text a naformátujte jej následovně:

alespoň 4 odstavce textu, <p>
nadpis první , druhé a třetí úrovně <h1>, <h2>, <h3>
alespoň dva odkazy <a href=““>
alespoň 1 obrázek <img src=““ alt=““>
alespoň 4 tagy pro <span> a 2 tagy pro <div>

Pomocí následujících css vlastností správně přidejte kód jak do index.html souboru, tak do style.css.

color
background-color
font-size
text-align
font-weight
font-style
text-decoration
margin
padding

Přesnou deklaraci jednotlivých vlastností je možné dohledat např. na: CSS Tutorial (w3schools.com) nebo na CSS: Cascading Style Sheets | MDN (mozilla.org)

V html a css definujte:

pro jeden z elementů <div> vytvořte třídu error – červený text na žlutém pozadí, přidejte adekvátní kód jak do html, tak do css
pro druhý element <div> využijte selektor identifikátoru footer – text vycentrovaný doprostřed, italikou
pro nadpisy <h1>, <h2>, <h3> využijte typový selektor a definujte tučné písmo
- pro nadpis <h1> zvolte velikost písma 150%
- pro nadpis <h2> zvolte velikost písma 130%
- pro nadpis <h3> zvolte velikost písma 115%
text pro všechny odstavce zarovnejte vpravo, velikost písma 110%, barva zelená
text u odkazů nebude podtržený
obrázek bude kolem sebe mít margin 15px

C6 – základy CSS

https://www.umimeinformatiku.cz/rozhodovacka-cviceni-zaklady-css-2

C7 – základy HTML

Zdroje:

https://www.itnetwork.cz/html-css/css3/zaklady/css3-selektory
https://www.vzhurudolu.cz/