Lekce 2 - Selektory v CSS3
V minulé lekci, Úvod do CSS3, jsme se uvedli do problematiky kaskádových stylů CSS3, ukázali si, k čemu slouží, její historii, způsoby připojení CSS k HTML a CSS selektory.
Úvodní lekce byla spíše teoretická, tato lekce bude zase více praktická. Vrhneme se totiž na konkrétní příklady CSS3 selektorů, pomocí kterých stylujeme HTML dokument.
Selektory
Pro správné nastylování stránky je nutné přesně specifikovat, jaký element má mít jaké styly. Občas ale potřebujeme vybrat pouze některé elementy nebo konkrétní element označit třídou či identifikátorem. Tato lekce bude spíše výňatkem těch nejpoužívanějších a nejpotřebnějších selektorů.
Pro začátek si připravíme HTML dokument pro úspěšné demonstrování příkladů a připojíme vytvořený CSS soubor do hlavičky jako v minulé lekci, pro opakování si kód ještě jednou uvedeme:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <h1>CSS3 selektory</h1> <p>První odstavec.</p> <p>Druhý odstavec.</p> <p>Třetí odstavec.</p> <p>Čtvrtý odstavec.</p> </body> </html>
Jediná změna je v HTML části, kde si zvolíme jeden nadpis a čtyři odstavce pro demonstraci našich příkladů.
Všechny elementy
Jako první selektor budeme chtít vybrat všechny elementy a to uděláme
pomocí hvězdičky (*). 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; }
Když si stránku zobrazíme v prohlížeči, můžeme vidět, že se nadpis i odstavce ukázaly v zeleném kabátě. 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. Jako příklad jsme si jej uvedli už v předchozí lekci, když jsme stylovali nadpisy první a druhé úrovně. Vyzkoušíme si jej ještě jednou a to přidáním zelené barvy všem odstavcům. Stačí nám přidat pouze jeden řádek do našeho CSS souboru:
p { color: green; }
V prohlížeči se nám zobrazí toto:
Všechny odstavce jsou zabarvené zeleně, ale nadpis <h1>
nikoliv.
Třídy
Selektorem třídy označujeme element specifickou, námi deklarovanou
třídou. Třídu v CSS dokumentu "vybereme" z HTML dokumentu pomocí tečky
(.), doplněnou o název třídy. Formát je tedy takový:
.nazev-tridy { vlastnost: hodnota; }
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 selektor, který označuje
všechny elementy (*) již nebudeme potřebovat a můžeme jej
zakomentovat nebo odstranit. CSS soubor bude vypadat následovně:
.zelena { color: green; }
První odstavec by měl být po aktualizování naše webové stránky zelený:
Nyní si vyzkoušíme přidat další třídu k prvnímu odstavci, tak aby
bylo jeho písmo vypsáno tučně. Název třídy bude třeba
.tucne. Tuto vlastnost bude mít rovnou i druhý odstavec:
<p class="zelena tucne">První odstavec.</p> <p class="tucne">Druhý odstavec.</p>
Třídě pro tučnost písma přidáme vlastnost font-weight s
hodnotou bold. CSS kód bude vypadat následovně:
.zelena { color: green; } .tucne { font-weight: bold; }
Zobrazí se nám tedy dva tučné odstavce:
Nyní již víme, jak se přidává několik tříd k jednomu elementu. Podíváme se teď v rychlosti na identifikátor a pak si ukážeme velice zajímavé pseudo-třídy.
Identifikátor
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. Na jedné stránce by
se mělo objevovat pouze jedno unikátní ID, proto ho
nepoužívejte namísto tříd. Deklaruje se pomocí hashtagu v CSS souboru,
zbytek je ale stejný jako u tříd. 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í).
Pseudo-selektory
Právě jsme došli k té zajímavější části lekce. Pseudo-selektory jsou výborná věc, která usnadňuje spoustu práce. Budeme potřebovat "čistou pracovní plochu", takže uvedeme náš HTML dokument do původního stavu, jako byl na začátku lekce a vyčistíme i CSS, popř. můžete vše zakomentovat.
Pseudo-selektory se klasicky zapisují v CSS takto:
selector:pseudo-class { vlastnost: hodnota; }
Krásně si to ukážeme na prvním příkladu.
: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>
Vyzkoušet si to můžeme ihned níže:
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; }
Na ukázce níže můžeme vidět, že se 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.
V další lekci, Jednotky (em, rem, px...) v CSS3, se uvedeme do problematiky délkových jednotek v CSS3. Ukážeme si různé druhy jednotek a kdy je použít.
