2. diel - CSS 3 selektory

V minulej lekcii, Úvod do CSS 3 , sme sa uviedli do problematiky kaskádových štýlov CSS 3, ukázali si, na čo slúži, jej histórii, spôsoby pripojenia CSS k HTML a CSS selektory.

Úvodná lekcia bola skôr teoretická, táto lekcia bude zase viac praktická. Vrhneme sa totiž na konkrétne príklady CSS3 selektorov, pomocou ktorých štýlom HTML dokument.

Selektory

Pre správne nastylování stránky je nutné presne špecifikovať, aký element má mať aké štýly. Občas ale potrebujeme vybrať iba niektoré elementy alebo konkrétny element označiť triedou alebo identifikátorom. Táto lekcia bude skôr výňatkom tých najpoužívanejších a najpotrebnejších selektorov.

Pre začiatok si pripravíme HTML dokument pre úspešné demonštrovanie príkladov a pripojíme vytvorený CSS súbor do hlavičky ako v minulej lekcii, pre opakovanie si kód ešte raz uvedieme:

<!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á zmena je v HTML časti, kde si zvolíme jeden nadpis a štyri odseky pre demonštráciu našich príkladov.

Všetky elementy

Ako prvý selektor budeme chcieť vybrať všetky elementy a to urobíme pomocou hviezdičky (*). Za zmienku tu určite stojí to, že hviezdičkou vyberáme aj tag <body>, čo môže byť občas na obtiaž. Keby sme nastavili u tohto selektora vlastnosť background s hodnotou napr. blue, tak uvidíme, že sa nám celá stránka přebarví na modro. My si ale pre demonštráciu zvolíme farbu písma zelenú. Tento štýl pridáme do nášho CSS súboru:

* {
   color: green;
}

Keď si stránku zobrazíme v prehliadači, môžeme vidieť, že sa nadpis aj odseky ukázali v zelenom kabáte. Rovnakú farbu textu by dostali aj ďalšie elementy, ktoré by v HTML dokumente boli:

Všechny elementy zelené

index.html

Typový selektor

Najjednoduchším je tzv. Typový selektor, ktorý vyberie všetky elementy nami uvedeného typu a pridá im štýl. Ako príklad sme si ho uviedli už v predchádzajúcej lekcii, keď sme stylovali nadpisy prvej a druhej úrovne. Vyskúšame si ho ešte raz a to pridaním zelenej farby všetkým odseky. Stačí nám pridať iba jeden riadok do nášho CSS súboru:

p {
   color: green;
}

V prehliadači sa nám zobrazí toto:

Odstavce zeleně

index.html

Všetky odseky sú zafarbené zelene, ale nadpis <h1> nie.

Triedy

Selektorom triedy označujeme element špecifickú, nami deklarovanú triedou. Triedu v CSS dokumente "vyberieme" z HTML dokumentu pomocou bodky (.), Doplnenú o názov triedy. Formát je teda taký:

.nazev-tridy {
   vlastnost: hodnota;
}

Presunieme sa do HTML dokumentu, kde si upravíme element prvého odseku. Pridáme mu triedu .zelena:

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

Budeme mu chcieť dať zelenú farbu textu. CSS selektor, ktorý označuje všetky elementy (*) už nebudeme potrebovať a môžeme ho zakomentovat alebo odstrániť. CSS súbor bude vyzerať nasledovne:

.zelena {
   color: green;
}

Prvý odsek by mal byť po aktualizovanie naše webové stránky zelený:

První odstavec zeleně

index.html

Teraz si vyskúšame pridať ďalšiu triedu k prvému odseku, tak aby bolo jeho písmo vypísané tučne. Názov triedy bude treba .tucne. Túto vlastnosť bude mať rovno aj druhý odsek:

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

Triede pre tučnosť písma pridáme vlastnosť font-weight s hodnotou bold. CSS kód bude vyzerať nasledovne:

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

Zobrazí sa nám teda dva tučné odseky:

Tučně a zeleně

index.html

Teraz už vieme, ako sa pridáva niekoľko tried k jednému elementu. Pozrieme sa teraz v rýchlosti na identifikátor a potom si ukážeme veľmi zaujímavé pseudo-triedy.

Identifikátor

Identifikátor (#id) je taký konkrétnejší selektor. Má totiž väčšiu prioritu ako trieda a používa sa skôr pre JavaScript alebo odkazy na stránke. Na jednej stránke by sa malo objavovať iba jedno unikátne ID, preto ho nepoužívajte namiesto tried. Deklaruje sa pomocou hashtag v CSS súbore, zvyšok je ale rovnaký ako u tried. V HTML dokumente ho potom vkladáme do atribútu HTML elementu: id="nazev-id". Vyskúšame si vytvoriť identifikátor pre červenú farbu, ktorú pridáme prvému odseku:

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

Do CSS súboru sme pridali identifikátor s názvom #cervena, ktorý udáva červenú farbu písma:

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

Vo výsledku môžeme vidieť, že priorita identifikátorov existuje a tiež funguje:

Tučně a zeleně

index.html

Súbor CSS sa číta zhora nadol. Ak teda chceme "prepísať" už deklarovaný štýl, vložíme ho nakoniec (musí byť nižšie, než pôvodný).

Pseudo-selektory

Práve sme došli k tej zaujímavejšie časti lekcie. Pseudo-selektory sú výborná vec, ktorá uľahčuje veľa práce. Budeme potrebovať "čistú pracovnú plochu", takže uvedieme náš HTML dokument do pôvodného stavu, ako bol na začiatku lekcie a vyčistíme aj CSS, popr. môžete všetko zakomentovat.

Pseudo-selektory sa klasicky zapisujú v CSS takto:

selector:pseudo-class {
      vlastnost: hodnota;
   }

Krásne si to ukážeme na prvom príklade.

`:hover`

Vlastnosť: hover môžeme použiť prakticky na akýkoľvek HTML element. Funkcia tejto vlastnosti je, že po nabehnutí na konkrétne element sa zmení jeho vlastnosť, ktorú deklarujeme. Vyskúšame si pridať :hover na náš nadpis, aby sa po nabehnutí na neho zmenila jeho farba na zeleno. CSS bude vyzerať nasledovne:

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

v CSS sme vytvorili triedu .zmen-barvu a pridali k nej pseudo-volič :hover a ešte nakoniec vlastnosť s hodnotou, na ktorú sa má zmeniť. V HTML pridáme nadpise našu vytvorenú triedu:

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

Vyskúšať si to môžeme ihneď nižšie:

Tučně a zeleně

index.html

Po nabehnutí na nadpis CSS3 selektory sa nadpis zafarbí na zeleno.

`:first-child`

Ďalším pseudo-selektorom je :first-child, ktorý nájde prvý element daného typu a pridá mu nejaký štýl. Pre našu ukážku si ešte pridáme do HTML tagy <div></div>, ktorým obalíme všetky odseky:

<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ásledne upravíme CSS súbor a to pridaním nasledujúceho pseudo-selektora:

div :first-child {
   color: red;
}

Na ukážke nižšie môžeme vidieť, že sa prvý element v tagu <div> zafarbil na červeno:

Tučně a zeleně

index.html

`:nth-child(x)`

Ďalšia v poradí je :nth-child(x), ktorý hovorí, koľký element daného typu vyberáme. Je tu niekoľko variantov zápisu, ktoré sa líšia hodnotou v zátvorkách. Konkrétne číslo, ako už bolo povedané, hovorí, koľký element sa vyberie. Teda, keď zvolíme číslo 2, tak sa nám vyberie druhý element. Pre výber druhého odseku v divu by bol zápis v našom CSS súboru nasledovný:

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

Ale to je len základný variant.

Tiež si môžeme povedať, že chceme vybrať každý druhý element:

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

Zápis 2n nám hovorí, že vyberáme n-tý prvok, v našom prípade druhý a +0 označuje začiatok počítania. Výsledkom je zelené písmo pre každý druhý odsek v našom divu:

Každý druhý zelený

index.html

Keď by sme zmenili 0 na 1, čiže odkiaľ sa má začať počítať, tak výsledkom by bolo zelené písmo pre každý druhý odsek, ale začínalo by sa od prvého odseku:

Každý druhý zelený

index.html

Ďalším spôsobom, ľahším a hojne využívaným, je označenie ako odd (nepárny) alebo even (párny). Je to stále rovnaký zápis, len namiesto číselných hodnôt používame tieto dve slovné označenie.

Ukážeme si to teraz na krásnom príklade. Budeme chcieť vypísať zelene každý nepárny odstavec pomocou hodnoty odd a každý druhý odsek modro pomocou 2n+0. Kód bude vyzerať nasledovne:

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

Po pridaní CSS a aktualizáciu stránky by sme mali mať nepárne odseky zelene a párne modro:

Zelená a modrá

index.html

Toto štýlovanie sa hojne využíva u tabuliek, každý riadok tabuľky sa dá tak ľahko rozlíšiť.

V ďalšej lekcii, Jednotky (em, rem, px, ...) , sa uvedieme do problematiky dĺžkových jednotiek v CSS3. Ukážeme si rôzne druhy jednotiek a kedy ich použiť.

Článok pre vás napísal Nocik

Užívateľské hodnotenie:

1 hlasov

...

Aktivity