Kontrola selektorů
Selektory šablon stylů CSS slouží k výběru prvků pro použití stylu. Selektory nabízejí velkou flexibilitu a výkon. Selektory umožňují použít styl pro všechny prvky nebo pro jeden konkrétní prvek a dokonce i jedno konkrétní písmeno.
Existují tři základní typy selektorů:
- Elementy
- Třídy
- Identifikátory
Pomocí těchto selektorů můžete použít styly pro mnoho prvků nebo několik.
Selektory elementů
Selektor elementu se vztahuje na všechny prvky s danou značkou. Libovolný element HTML lze použít jako selektor elementu. Použití h1 umožňuje upravit všechny h1 prvky na stránce.
h1 {
/* style */
}
Selektory tříd
Všechny elementy HTML umožňují přidat class atribut.
class slouží k seskupení prvků a umožňuje je označit pro použití nastavení CSS.
Při vytváření životopisu máte k dispozici sekce týkající se vašeho vzdělání a historie zaměstnání. Použití třídy by vám umožnilo naformátovat tyto prvky se stejným stylem.
<div class="history">
<h2>Employer name</h2>
<h3>Job title</h3>
<h3>3 Jun 19 - 8 Jun 21</h3>
</div>
<div class="history">
<h2>School name</h2>
<h3>Major</h3>
<h3>Sep 2014 - May 2018</h3>
</div>
V předchozím příkladu byste pravděpodobně chtěli, aby formátování pro každou z nich div bylo stejné jako u zobrazených podobných typů informací. Když tyto dva div prvky označíte stejnou třídou, můžete u každého použít stejný styl CSS.
Chcete-li identifikovat třídu v šabloně stylů CSS, předponu . před názvem. V našem příkladu byste použili .history.
.history {
/* your styles */
}
Pokud používáte soubor CSS, napíšete definici stylu třídy do souboru CSS. Atribut třídy v HTML odkazuje na definici ze souboru CSS.
Pseudo-třídy
Pseudo-třídy umožňují identifikovat prvky na základě jejich umístění na stránce nebo jak s nimi uživatel pracuje.
Při interakci uživatele s webovou stránkou se mění stav různých elementů. Uživatel může najet myší na položku a chcete, aby se barva při najetí myší změnila. Nebo pokud uživatel vybral odkaz. Poté, co tento odkaz navštíví, můžete mu dát vědět změnou stylu. Css podporuje mnoho pseudotud, které se používají dynamicky na základě toho, co uživatel dělá nebo provedl. Pseudo-třídy jsou předpony :a jsou umístěny za jiným selektorem.
Pokud například chcete nastavit barvu pozadí odkazu na žlutou, když na ni uživatel najede myší, můžete použít následující šablony stylů CSS:
a:hover {
background-color: yellow;
}
Některé z nejběžnějších pseudotud jsou uvedeny v následující tabulce:
| Pseudo-třída | Popis |
|---|---|
hover |
Uživatel najede myší na položku. |
visited |
Odkaz, na který jste dříve klikli |
link |
Nevisený odkaz |
first-child |
První podřízená položka odpovídající selektoru v hierarchii |
last-child |
Poslední podřízená položka odpovídající selektoru v hierarchii |
Důležité
Pomocí pseudo elementů a šablon stylů CSS můžete odebrat podtržení z hypertextových odkazů. Obecně platí, že je nejlepší ponechat podtržení pro účely přístupnosti. Podtržený text umožňuje uživateli rychle identifikovat odkazy na stránce.
Selektory ID
Podobně jako třídy umožňuje ID použít styl u elementu. Zatímco lze třídu použít na více prvků, ID musí být jedinečné a odkazovat pouze na jeden prvek.
Na životopisu můžete mít oddíl pro sociální média, jako je X, GitHub nebo blog. Pokud jste chtěli vlastní styl pro tento oddíl, můžete nastavit ID:
<div id="social-media">
<!-- list of links -->
</div>
ID jsou předponou v šabloně # stylů CSS:
#social-media {
/* style */
}
Poznámka:
Standardní konvence vytváření názvů pro třídy a ID je použití "skewer-casing". Každé slovo je malými písmeny a odděleno písmenem -. Název skewer-case pochází z toho, jak se slova zobrazují, jako by mohla být na špekáku.