{%hackmd anYwyN--TziyASUWcqP-Gw %} # Třídy --- # Problém: jak odlišit elementy ```html <p>A víte, že…?</p> <p>Ještě jeden odstavec</p> ``` ```css p { color: blue; } ``` note: * Co kdybych chtěl vypsat odstavce modře? * Ale co kdybych chtěl udělat jen první odstavec modrý? --- # Řešení: jak odlišit elementy ```html <p class="uvodnik">A víte, že…?</p> <p>Ještě jeden odstavec</p> ``` <!-- .element: class="c-text-md" contenteditable="true" --> ```css .uvodnik { color: blue; } ``` note: * řešením je přidat třídu, která umožňuje se zaměřit v CSS přesněji * třída se v HTML přidává jako atribut `class` * v CSS se zapíše **s tečkou** na začátku (tím se odliší od názvu prvku). * třídu můžeme přiřadit libovolnému počtu značek --- # Třída platí pro více elementů ```html <h1 class="uvodnik">Tip</h1> <p class="uvodnik">A víte, že…?</p> <p>Ještě jeden odstavec</p> ``` ```css .uvodnik { color: blue; } ``` note: * třída se tedy použije pokud má nějaký prvek speciální vlastnosti * nebo se skupina vlastností opakuje a chceme si tak ušetřit zápis * třída není ničím jiným než dalším atributem * zatímco `alt`, `src`, `href` lze přidat jen některým značkám, atribut `class` lze přidat kterékoliv značce --- # Vícenásobné třídy ```css .tip { color: blue; } .cool { background-color: red; } ``` ```html <p class="tip">…</p> <p class="cool">…</p> <p class="cool tip">…</p> ``` note: * jeden atribut `class` může mít přiřazeno více hodnot ‒ tříd * oddělujeme je mezerou --- # Pokročilé selektory --- # Vícenásobný selektor ```css .tip, h2 { color: green; } ``` note: * obarví prvky s třídou .tip a nadpisy 2. úrovně na zeleno * každý selektor na nový řádek, aneb za čárkou odřádkovat --- # Kontextový selektor ```css .tip h2 { color: blue; } ``` note: * obarví nadpisy 2. úrovně na modro, pokud jsou v prvku s třídou `.tip` * odpovídá zanořování v HTML * tady má mezera význam (jinde na nich tolik nezáleží) --- # Na pořadí záleží <pre class="c-text-md fragment" contenteditable data-fragment-index="10"><code class="stretch lang-css" data-noescape><span class="fragment ">p { color: red; background-color: pink; }</span> <span class="fragment">p { color: green; }</span></code></pre> note: * platí poslední nastavená hodnota vlastnosti * často se stane, že zadáte znovu tutéž vlastnost. Když dbáte na úpravu 1 pravidlo na řádek, snáz to odhalíte. (Jsou i automatizované nástroje, které to hlídají za nás.) ---