Môžete adresovať tzv. deti. Tými sú tie, ktoré sú priamo podriadené iným prvkov. Priznám sa, že to znie trochu abstraktne, ale dá sa to krásne vysvetliť na príklade.
<body> <p>Odsek 1</p> <p>Odsek 2</p> <p>Odsek 3</p> </body>
Body je tu nadradený prvok. P-Prvky sú jednotlivými potomkami body. Založené na tomto vedomí, sa dá použiť selektor detí.
body>p {
color: modrá;
}
Táto syntax nastaví všetky odseky, ktoré sú priamočiarymi deťmi body, na modrú farbu.
Nasledujúci príklad ešte raz ukazuje rozdiely medzi oboma príkazmi body p a body>p.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
body p {
color:#0066FF;
}
</style>
</head>
<body>
<p>Odsek 1</p>
<p>Odsek 2</p>
<p>Odsek 3</p>
<div>
<p>Odsek 4</p>
</div>
</body>
</html>Prvé tri definované textové odseky p sú priamymi deťmi body. Príkaz body p priradí všetkým textovým odsekom modrú farbu. body>p zase ovplyvňuje výhradne prvé tri textové odseky. Preto sú tieto odseky zobrazené vo väčšom písme.
Ako ďalšie by som vám chcel predstaviť selektor nasledujúcich prvkov. Tento selektor označuje prvok, ktorý okamžite nasleduje po inom prvku a má s ním rovnaký nadradený prvok. Aj k tomu opäť príklad:
h1+p {
color: modrá;
}
Týmto kódom sa farba textu odseku nastaví na modrú. Platí to však len v prípade, že sa odsek nachádza priamo za nadpisom prvej úrovne.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1+p {
color: modrá;
}
</style>
</head>
<body>
<h1>Nadpis</h1>
<p>Odsek 1</p>
<h2>Nadpis</h2>
<p>Odsek 2</p>
<p>Odsek 3</p>
<div>
<p>Odsek 4</p>
</div>
</body>
</html>Pozrite si výsledok v prehliadači.
Iba prvý odsek sa zobrazuje modrou farbou. Ostatné odseky sú čierne. Dôvodom je skutočnosť, že tieto elementy p nenasledujú za h1, ale za h2.
Pokiaľ ide o nasledujúce prvky, v CSS3 boli zavedené ďalšie možnosti. Odteraz je možné pristupovať ku všetkým nasledujúcim prvkov určitého prvku. Príklad:
h1~p {
color: červená;
}
Touto syntaxou sú adresované všetky odseky, ktoré nasledujú po h1.
Môžete byť adresovať nie len prvky priamo. Je možné pristupovať aj k atribútom prvkov.
Tu je niekoľko týchto selektorov:
• [att] - Prvok musí obsahovať iba atribút. Či sa predá aj hodnota, nie je dôležité.
• a[href] - Všetky odkazy (<a href=…>) sú označené. Neplatí to však pre definície kotiev (<a name=…>).
• [align=left] - Označuje všetky prvky, ktoré majú atribút align s hodnotou left.
• [attr~=value] - Označuje všetky prvky, v ktorých je hodnota obsiahnutá v zozname hodnôt oddelených medzerou.
• [attr|=value] - Označuje prvok, ak daná hodnota na začiatku reťazca oddeleného pomlčkou v rámci atribútu.
• img[width="200"] - Tu sú označené všetky obrázky, ktoré majú šírku 200 pixelov.
Samozrejme sa vynára otázka, kedy by ste vlastne mohli potrebovať také atribučné selektory. Napríklad si predstavte formulár a v ňom definované zaškrtávacie políčka. Zaškrtávacie políčka sú - už to iste viete - definované cez prvok input. Problém spočíva v tom, že prvok input sa používa aj na definíciu bežných textových vstupných políčok. Preto nemôžete cez input zabezpečiť odlišné formátovanie zaškrtávacích políčok a textových vstupných políčok. Práve v tomto bode prichádzajú na rad atribučné selektory. Pre lepšie pochopenie sa pozrite na nasledujúci príklad:
<body> Meno: <input type="text" id="meno" /> <br /> Muž: <input type="checkbox" name="pohlavie" id="pohlavie" /> <br /> Žena: <input type="checkbox" name="pohlavie" id="pohlavie" /> </body>
Tu boli definované rôzne prvky formulára.
• textové vstupné pole
• dve zaškrtávacie políčka
Tieto polia by mali byť formátované.
input {
border:3px solid #000;
width: 10em;
}Poliam rám a šírku priradíme poliam.
Problém spočíva v tom, že stanovená šírka by sa v skutočnosti mala vzťahovať len na textové políčko, nie však na zaškrtávacie políčka. Problém je v tom, že prostredníctvom selektora elementu nie je možné rozlišovať medzi rôznymi typmi polí. Pre dosiahnutie takéhoto rozlíšenia sa používajú atribučné selektory. Tu je príklad, ako by to mohlo vyzerať:
input[type="checkbox"] {
width: auto;
}
Prostredníctvom tohto selektora sa skutočne pristupuje iba k tým vstupným prvkom, ktoré obsahujú atribútovú hodnotu type="checkbox".
Opakovania
CSS teraz konečne ponúka možnosť adresovať opakovania. Samozrejme, otázka znie, na čo to môže byť dobré. Tieto selektory sú užitočné napríklad vtedy, ak chcete mať každý druhý riadok tabuľky inú farbu. Predtým než predstavím dostupné selektory, je tu veľmi typický príklad:
<ol id="sprachen">
<li>HTML</li>
<li>HTML5</li>
<li>CSS</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JScript</li>
<li>Java</li>
<li>PHP</li>
<li>Python</li>
</ol>
Jedná sa o normálny zoznam odrážkov. Pomocou CSS by mal každý tretí polozáznam získať pridelenú pozadovú farbu.
Na to sa používa selektor nth-child(). Tento selektor zvolí každý n-tého potomka.
#sprachen li:nth-child(3n) {
background-color: red;
}
Nasledujúce selektory sú k dispozícii:
• :root – Pomocou selektora :root sa dá adresovať koreň dokumentu.
• :nth-child(n) – Riadi každý n-tý element vnútri nadradeného elementu. Tento selektor je užitočný najmä v prípade, že chcete stýmto spôsobom rôzne štylizovať rôzne prvky. n je pevné kľúčové slovo, na ktoré je možné aplikovať matematické operácie. n sa dá rovnať hodnote 1.
• :nth-last-child(n) – Riadi každý n-tý element v elemente tak, že sa prechádza zadu dopredu cez deti.
• :nth-of-type(n)– Riadi každý n-tý element rovnakého typu HTML na rovnakej úrovni.
• :nth-last-of-type(n) – Riadi každý n-tý element na rovnakej úrovni, pričom sa elementy prechádzajú zozadu dopredu.
• :first-child – Riadi prvý potomok v elemente.
• :last-child – Riadi posledný potomok v elemente.
• :first-of-type – Riadi prvý prvok rovnakého typu HTML v nadradenom elemente.
• :last-of-type – Riadi posledný prvok rovnakého typu HTML v nadradenom elemente.
• :only-child – Riadi prvok, ktorý nemá súrodenca a predstavuje jediný potomok v nadradenom prvku.
• :only-of-type – Riadi prvok, ktorý nemá súrodenca rovnakého typu HTML a predstavuje tak jediný prvok tohto druhu v nadradenom prvku.
• :empty – Riadi prázdne prvky.
Uvedené selektory zjednodušujú prácu s HTML, pretože umožňujú voliť zložité definície tried minulosti.
