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:

Všechny elementy zelené

index.html

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:

Odstavce zeleně

index.html

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ý:

První odstavec zeleně

index.html

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:

Tučně a zeleně

index.html

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:

Tučně a zeleně

index.html

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:

Tučně a zeleně

index.html

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:

Tučně a zeleně

index.html

`: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:

Každý druhý zelený

index.html

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:

Každý druhý zelený

index.html

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:

Zelená a modrá

index.html

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.

Článek pro vás napsal Nocik

Uživatelské hodnocení:

155 hlasů

...

Aktivity