Základní selektory v CSS
Selektory v CSS určují to, na co se budou vztahovat vlastnosti CSS, laicky řečeno konkrétní pravidla vzhledu. Vlastnostmi samotnými se zde zabývat nebudeme, jelikož k tomu jsou určené konkrétní články a zde naleznete rozcestník na vlastnosti.
CSS selektor pro HTML značky (tagy)
Ukázka HTML:
<h1>Nadpis</h1>
Ukázka CSS:
h1 {…}
Způsob, jak ovlivnit pravidla pro všechny HTML prvky jednoho typu (v tomto případě <h1>) na celé stránce. Tímto způsobem můžete ovlivnit všechny HTML značky (seznam najdete zde), ale smysl to má jen u některých. Např. u těchto:
<h1> až <h6> | <p> | <strong> | <b> | <em> | <i> | <code> | <address> | <pre> | <hr> | <ul> | <ol> | <li> | <dl> | <dt> | <dd> | <a> | <button> | <map> | <table> | <thead> | <tbody> | <tr> | <td> | <th> | <img> | <input> | <select> | <textarea> | <label> | <fieldset> | <legend> | <menu>
Toto ovlivnění nemusí být neměnné. Jedná se o obecné označení, které není problém přebít např. pomocí class, id atd. Jak to provést se dočtete zde. Mezi složené závorky se umisťují vlastnosti. Ukázka toho samého včetně vlastnosti ovlivňující barvu textu tak, jak by vypadal v praxi:
h1 {color: red;}
Univerzální CSS selektor * pro všechny HTML prvky
Ukázka CSS:
* {…}
Hvězdička je kouzelný trik, jak jedním způsobem označit všechny HTML tagy (značky). Je to stejné, jako byste vyjmenovali úplně všechny. To může být velice užitečné, ale někdy i zrádné. K jeho použití je dobré mít předvídavost i zkušenosti.
Dalším využitím hvězdičky je její omezení na tagy vnořené do určitého předka v dokumentu.
Ukázka hvězdičky omezené předkem:
menu * {…}
V tomto příkladu dojde k ovlivnění všech prvků vnořených dovnitř značky <menu>.
CSS selektor pro třídy class
Ukázka HTML:
<div class="nazev-tridy nazev-druhe-tridy"> … </div>
Ukázka CSS:
.nazev-tridy {…}
Velice často používané řešení pro označení takových univerzálních HTML značek, jakou je např. <div>, <span> apod. Může být však použit pro označování jakékoli HTML značky, která ohraničuje nějaký obsah na stránce. Tím, že něco pojmenujeme jako třídu získáme spoustu možností, jak ji velice efektivně ovlivňovat, pokud si strukturu tříd důmyslně promyslíme. Jeden název třídy (class) je možné použít jednou, ale klidně i opakovaně ve stejném HTML dokumentu (stránce), což je rozdíl oproti ID, viz níže. Jedna značka může mít i více názvů tříd. Jeden název od druhého se zapisuje do jednoho zápisu class a odlišuje se mezerou. Do názvu je povolené dát jakékoli znaky, kromě výjimek a systémem vyhrazených znaků, jako např:
- Mezera
- Číslovka na počátku je zakázaná, ale uvnitř již může být
- . tečka
- # mřížka
- { } otevírací i zavírací složená závorka
- ( ) otevírací i zavírací složená závorka
- , čárka
- ; středník
- / lomítko
- * hvězdička
- ~ vlnovka
- < > otevírací a zavírací špičaté závorky
Názvy je však vhodné používat bez diakritiky a především logické, aby bylo snadné se v kódu orientovat a nebyl příliš komplikovaný a rozsáhlý. Každý kodér by si před zahájením prací měl vytvořit budoucí strukturu kódu, díky čemuž vytvoří logicky strukturovaný kód s přehlednými názvy. Třídy je možné kombinovat i s dalšími druhy selektorů, což bude popsáno v další části.
V zápisu CSS kódu již nepíšeme slovo class tak, jako v HTML, ale používáme tečku před názvem. Vidět je to v ukázce výše.
CSS selektor pro identifikátor id
Ukázka HTML:
<div id="nazev-id"> … </div>
Ukázka CSS:
#nazev-id {…}
ID stejně jako class může označovat obecné značky typu <div>, <span>…, ale v podstatě také jakoukoli jinou značku, pokud to dává smysl. S názvy je to stejné, jako u class. V kódu CSS se značí za pomoci mřížky # před názvem. Zásadní rozdíl spočívá v následujícím:
- Název ID je možné v jednom dokumentu (jedné stránce) použít jen jednou. Samotné id="" můžete používat kolikrát chcete, avšak pokaždé s jiným názvem v jednom dokumentu.
- Do jednoho id="" můžete dát pouze jeden název, už ne více, jako je tomu u class.
- Pokud budou některá pravidla v kolizi, pak id="" má vyšší prioritu a laicky řečeno „vyhraje“ nad class a přebije jeho pravidla.
ID se hodí zejména v kombinaci s JavaScriptem, ale zde se nebudeme zabývat vysvětlováním podrobností.
Obecný selektor s označením atributu
Ukázka HTML:
<input type="submit">
Ukázka zápisu v CSS:
input[type="submit"] {…}
Někdy nemá kodér možnost ovlivnit generovaný HTML kód odesílaný systémem ze serveru a chybí mu u tagu označení pomocí class nebo id. I na takové situace selektory pamatují, což ukazuje tento příklad. Tag <input type="submit"> je tlačítko sloužící k odeslání formuláře, kdežto jiné inputy jako např. <input type="text"> slouží ke zcela jiným účelům a mají i naprosto jiný vzhled. Díky selektoru s označením atributu můžete stylovat (ovlivňovat vzhled) např. pouze tlačítek určených k odesílání formulářů bez toho, abyste ovlivnili jiné typy <input>.
Jindy je zapotřebí ovlivnit značku podle toho, jak začíná obsah atributu. To se může hodit např. v tomto případě:
<a href="/pod-heslem/vstup"> … </a>
Představme si situaci, kdy pro část webu bude vyžadována autorizace návštěvníka. I do volně přístupného obsahu bude sice umístěn odkaz za pomoci značky <a>…</a>, ale kliknout na něj budou moci pouze ti návštěvníci, kteří již jsou přihlášení, pro nepřihlášené nebude povolen vstup. Tuto informaci byste chtěli sdělit návštěvníkům např. tím, že za odkaz umístíte symbol zámečku, případně odkaz vizuálně odlišíte ještě jiným způsobem. A nyní se dostáváme k našemu selektoru, který je k tomuto účelu ideální. Zápis v CSS by vypadal následovně:
a[href^="/pod-heslem/"] {…}
Vysvětlení příkladu: takto zapsaný selektor říká, že ovlivní každé <a>, jehož atribut href začíná (symbol stříšky ^) /pod-heslem/. Jak obsah atributu uvnitř závorek pokračuje již pro funkčnost selektoru není nijak podstatné.
Když je možné sledovat začátek obsahu atributu, tak je možné sledovat i konec. Příklad:
<a href="/nazev-souboru.pdf"> … </a>
a[href$=".pdf"] {…}
Vysvětlení příkladu: takto zapsaný selektor aplikuje pravidla pouze na odkazy <a> jejichž atribut končí (symbol dolaru $) na uvedné znaky v tomto případě na *.pdf. Zde asi není třeba příliš vysvětlovat užitečnost a použitelnost v praxi. Asi každý se někdy setkal s webem, kdy odkazy směřující na *.pdf měly před nebo za sebou symbol daného souboru.
Může někdy nastat potřeba ovlivnit pravidla vzhledu dle série znaků obsažených kdekoli v obsahu atributu, kdy nezáleží, zda jsou na začátku, uprostřed či na konci. Za tímto účelem se používá hvězdička *:
a[href*="helpmark.cz"] {…}
Takový selektor bude platit na všechny následující odkazy:
<a href="https://helpmark.cz"> … </a>
<a href="https://www.helpmark.cz"> … </a>
<a href="https://www.helpmark.cz/onas"> … </a>
Vlnovka ~ funguje obdobně jako hvězdička, ale s tím rozdílem, že u vlnovky se musí shodovat celý řetězec oddělený mezerou, laicky řečeno slovo.
Ukázka zápisu CSS:
img[class~="obr"] {…}
Ukázka zápisu HTML:
<img class="obr krasny">
<img class="obr-krasny">
Vysvětlení příkladu: zatím co při použití hvězdičky by selektor ovlivnil oba obrázky, tak u vlnovky ~ ovlivní pouze první obrázek, protože druhý nemá řetězec oddělený mezerou, nýbrž pomlčkou.
Pokud bychom v úplně stejném příkladu chtěli ovlivnit druhý obrázek, vypadal by CSS zápis následovně:
img[class|="obr"] {…}
Svislice totiž za ukončení řetězce (laicky slova) definuje pomlčku – na místo mezery jako je tomu u vlnovky.
Další selektory
Aby nebyl článek příliš dlouhý, tak další návody jsme umístili do dalších článků:
- Pseudo-class jsou pseudo selektory ovlivňující HTML prvky jen za určitých podmínek. Článek zde.
- Pseudo-elements jsou virtuální elementy vytvořené pomocí CSS. Článek zde.
- Praktické používání kombinací různých selektorů a vztahy mezi nimi. Článek zde.