Můžete mluvit o tzv. potomcích. Jsou to ty, které jsou přímo podřízeny jiným prvkům. To zní trochu abstraktně, ale lze to krásně vysvětlit na příkladu.
<body> <p>Odstavec 1</p> <p>Odstavec 2</p> <p>Odstavec 3</p> </body>
Zde je tělo nadřazeným prvkem. Prvky p jsou každý potomkem těla. Postupujíc na základě této znalosti, lze použít selektor potomků.
body>p {
barva: modrá;
}
Tato syntaxe nastaví všechny odstavce, které jsou přímými potomky těla, na modrou barvu.
Následující příklad znovu ukazuje rozdíly mezi oběma pokyny 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>Odstavec 1</p>
<p>Odstavec 2</p>
<p>Odstavec 3</p>
<div>
<p>Odstavec 4</p>
</div>
</body>
</html>První tři definované textové odstavce p jsou přímými potomky těla. Pokyn body p přiděluje všem textovým odstavcům modrou barvu. body>p naopak ovlivňuje pouze první tři textové odstavce. Proto jsou tyto odstavce zobrazeny větším písmem.
Dále vám chci představit selektor následného prvku. Tento selektor označuje prvek, který následuje bezprostředně po jiném prvku a má s ním stejný nadřazený prvek. I zde máme příklad:
h1+p {
color: modrá;
}
Tímto způsobem je barva textu odstavce nastavena na modrou. Platí to však pouze tehdy, pokud se odstavec přímo navazuje na nadpis prvního řádu.
<!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>Odstavec 1</p>
<h2>Nadpis</h2>
<p>Odstavec 2</p>
<p>Odstavec 3</p>
<div>
<p>Odstavec 4</p>
</div>
</body>
</html>Zobrazte si výsledek ve webovém prohlížeči.
Pouze první odstavec je zde zobrazen modře. Ostatní odstavce jsou černé. To je způsobeno tím, že tyto prvky p následují po h2, a ne po h1.
V CSS3 byly představeny další možnosti ohledně následujících prvků. Je nyní možné přistupovat ke všem následujícím prvkům určitého prvku. Příklad:
h1~p {
color: červená;
}
Tímto způsobem jsou osloveny všechny odstavce, které následují po h1.
Mimochodem, nelze mluvit pouze o přímých prvcích. Je také možné přistupovat ke vlastnostem prvků.
Zde je několik těchto selektorů:
• [att] - Prvek musí obsahovat pouze atribut. Bude-li předána i hodnota, není to důležité.
• a[href] - Budou označeny všechny hypertextové odkazy (<a href=…>). Toto však neplatí pro definice kotvy (<a name=…>).
• [align=left] - Označí všechny prvky, jejichž atribut align obsahuje hodnotu left.
• [attr~=hodnota] – Označí všechny prvky, ve kterých je hodnota obsažena v hodnotovém seznamu odděleném mezerou.
• [attr|=hodnota] - Označí prvek, pokud je uvnitř atributu uvedená hodnota na začátku řetězce odděleného pomlčkou.
• img[width="200"] - Budou zde označeny všechny obrázky, které mají šířku 200 pixelů.
Samozřejmě se nabízí otázka, kdy by se tyto atributové selektory mohly skutečně hodit. Představte si například formulář a v něm definované zaškrtávací políčka. Zaškrtávací políčka – to již víte – jsou definována prvkem input. Problém je v tom, že prvek input se používá také pro definici běžných textových polí. A tak není možné prostřednictvím input aplikovat odlišné formátování pro zaškrtávací políčka a textová pole. V tomto bodě vstupují do hry atributové selektory. Pro lepší pochopení se podívejte na následující příklad:
<body> Jméno: <input type="text" id="name" /> <br /> Muž: <input type="checkbox" name="pohlavi" id="pohlavi" /> <br /> Žena: <input type="checkbox" name="pohlavi" id="pohlavi" /> </body>
Zde byly definovány různé prvky formuláře.
• textové pole
• dvě zaškrtávací políčka
Tyto pole by měly být formátovány.
input {
border:3px solid #000;
width: 10em;
}Feldům jsou přiděleny rámce a šířka.
Problém spočívá v tom, že definovaná šířka by měla být aplikována pouze na textové vstupní pole, ne však na zaškrtávací políčka. S využitím vlastnostního selektoru však není možné rozlišit mezi různými typy polí. Aby bylo možné takové rozlišení provést, používají se atributní selektory. Zde je příklad toho, jak by to mohlo vypadat:
input[type="checkbox"] {
width: auto;
}
Ukazovaným selektorem se skutečně přistupuje pouze k těm vstupním prvkům, které mají kombinaci atributu-hodnoty type="checkbox".
Opakování
CSS nyní konečně nabízí možnost ansprechen Wiederholungen. Samozřejmě je zde otázka, k čemu může být něco takového dobré. Tyto selektory jsou užitečné například při úpravě barev každého druhého řádku tabulky. Než představím dostupné selektory, podívejme se na jedno typický pří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á se o bězdný seznam. CSS by měl nyní přidělit každé třetí poloze seznamu barvu pozadí.
Pro tento účel se používá selektor nth-child(). Tímto selektorem se ansprechen každý n-tý prvek.
#sprachen li:nth-child(3n) {
background-color: red;
}
Dostupné selektory jsou:
• :root - Umožňuje ansprechen k kořeni dokumentu.
• :nth-child(n) - Ansprechen každého n-tého prvku uvnitř nadřazeného elementu. Tento selektor je užitečný zejména pokud se má různě formátovat více prvků. N je pevně stanovené klíčové slovo, na které lze aplikovat aritmetické operace. N lze rovnat hodnotě 1.
• :nth-last-child(n) - Ansprechen každého n-tého prvku v prvkovém prvku, kdy se prohání vnitřní prvky zezadu.
• :nth-of-type(n) - Ansprechen každého n-tého prvku stejného HTML typu na stejné úrovni.
• :nth-last-of-type(n) - Ansprechen každého n-tého prvku na stejné úrovni, když se prvky prohání zezadu.
• :first-child - Ansprechen prvního prvku uvnitř prvku.
• :last-child - Ansprechen posledního prvku uvnitř prvku.
• :first-of-type - Ansprechen prvního prvku stejného HTML typu uvnitř nadřazeného elementu.
• :last-of-type - Ansprechen posledního prvku stejného HTML typu uvnitř v nadřazeném elementu.
• :only-child - Ansprechen prvku, který nemá žádný sourozenec a který je jediným potomkem v nadřazeném elementu.
• :only-of-type - Ansprechen prvku, který nemá žádné sourozenecké prvky stejného HTML typu a který je jediným prvkem tohoto druhu v nadřazeném prvku.
• :empty - Ansprechen prázdných prvků.
Vyrovnávání s těmito selektory značně zjednodušuje práci s HTML, protože složité definice tříd patří minulosti.
