HTML & CSS pro začátečníky

HTML a CSS pro začátečníky (část 27): Jak provést přístup pomocí selektorů (2)

Všechna videa tutoriálu HTML a CSS pro začátečníky

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.

HTML a CSS pro začátečníky (část 27): Jak pracovat s selektory (2)

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.

HTML & CSS pro začátečníky (část 27): Jak funguje přístup pomocí selektorů (2)



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.

HTML & CSS pro začátečníky (část 27): Jak funguje přístup pomocí selektorů (2)

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.

HTML & CSS pro začátečníky (část 27): Jak funguje přístup pomocí selektorů (2)

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".

HTML & CSS pro začátečníky (část 27): Jak pracovat s selektory (2)

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í.

HTML & CSS pro začátečníky (část 27): Jak funguje přístup pomocí selektorů (2)

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.