Dnes je Přidat k oblíbeným
Selektory v CSS
- Typu prvku
- Jednoznačného názvu prvku (identifikátoru)
- Třídy prvku
- Vícenásobných tříd
- Kombinace a sdružení selektorů
- Pseudotříd a pseudoprvků
Typ prvku
Je to ten nejjednodušší selektor. Jeho názvem je název tagu v HTML a definice stylu potom platí pro všechny tyto tagy v HTML dokumentu.h1 {width: 100px}
Všechny odstavce (p) v HTML dokumentu budou mít červenou barvu. Všechny nadpisy h1 v HTML dokumentu budou 100px široké.
Všechny prvky v dokumentu budou mít modré písmo (tabulky, odstavce, nadpisy, divy...)
Jednoznačný název prvku (identifikátor)
Slouží k tomu, abyste si nadefinovali vlastní seznamy pravidel a ty potom v HTML dokumentu přiřadíte k jednotlivým tagům, které chcete, aby byly zobrazeny podle těchto pravidel. Kterémukoliv tagu v HTML souboru můžete přiřadit atribut id="jméno_prvku". Žádné dva tagy v tomtéž HTML souboru však nesmějí mít název id stejný. Prvek s identifikátorem se v CSS označuje znakem # a jménem prvku (bez mezer).
CSS:
#nadpisek {color: blue;}
HTML:
<|jakýkoliv tag, podle názvu nejspíš h3| id="nadpisek">text, zobrazený modře</h3>
Třída prvku
Stejně jako identifikátor slouží k nadefinování vlastních stylů pro různé prvky. Stejnou třídu může mít v HTML dokumentu více tagů. V HTML se třída přiřadí atributem class="jméno_třídy" a v CSS se před selektor (jméno_třídy) napíše tečka.
CSS:
.vyrazne {color: red; font-weight: bold}
HTML:
<h1 class="vyrazne">Tučný červený nadpis h1</h1>
<p>Normální odstavec</p>
<p class="vyrazne">Tučný červený odstavec</p>
<span class="vyrazne">Tučný červený text</span>
Často se stává, že chceme, aby se třída .vyrazne zobrazila jinak u nadpisu h1, jinak u odstavce p a jinak u neutrálního tagu span. Proto názvu třídy v CSS předřadíme selektor- jméno HTML tagu.
h1.vyrazne {color: red; font-weight: bold}
p.vyrazne {color: blue; font-weight: bold}
span.vyrazne {color: green; font-weight: italic}
HTML:
<h1 class="vyrazne">Tučný červený nadpis h1</h1>
<p class="vyrazne">Tučný modrý odstavec</p>
<span class="vyrazne">Tučný zelený text</span>
<a class="vyrazne">Normální odkaz, protože v CSS není nadefinováno a.vyrazne.</a>
Pokud bychom v CSS kromě tříd h1.vyrazne, p.vyrazne a span.vyrazne nadefinovali ještě .vyrazne (bez selektoru před tečkou), potom by se <a class="vyrazne"> (ale taky <table class="vyrazne">, <div class="vyrazne">...) zobrazilo podle definice v pravidle .vyrazne {}. Tento způsob se nazývá kaskáda- proto kaskádové styly.
Vícenásobné třídy
Pokud chceme jeden prvek zařadit do více tříd, můžeme tak v HTML souboru učinit atributem class="první_třída druhá_třída další_třída". Jednotlivé třídy oddělujeme mezerami. Použití je zejména u rozsáhlejších webů nebo redakčních systémů, kde nemůžeme zasahovat do stylopisu.
.hodnevyrazne {color: red}
.malovyrazne {font-weight: bold}
.extremnevyrazne {color: red; font-weight: bold}
<p class="hodnevyrazne">Červený text</p>
<p class="malovyrazne">Tučný text</p>
<p class="extremnevyrazne">Tučný červený text</p>
Jednodušší možnost:
.hodnevyrazne {color: red}
.malovyrazne {font-weight: bold}
<p class="hodnevyrazne">Červený text</p>
<p class="malovyrazne">Tučný text</p>
<p class="hodnevyrazne malovyrazne">Tučný červený text</p>
Pokud by se hodnoty vzájemně vylučovaly (.hodnevyrazne by mělo nastavený červený text a .malovyrazne modrý), pak bude platit pravidlo, uvedené ve stylopisu později. Je to opět díky kaskádě.
Kombinování a sdružování selektorů
Stylované prvky můžeme popisovat přesněji než jen jediným selektorem. Pravidla CSS umožňují zadat kontext, ve kterém se musí prvek nacházet, aby pravidlu vyhověl. Můžeme tak stanovit, že pravidlo bude platit jen pro prvek, který se nachází uvnitř jiného prvku. Potom zapíšeme do stylopisu popis obou prvků (název tagu, identifikátor nebo třídu) oddělený mezerou (jako první prvek vnější, potom vnitřní).
p a {color: orange;}
p a:hover {color: yellow; text-decoration: underline}
h1 a {background-color: yellow}
h1 a:hover {background-color: green}
a {text-decoration: none}
h1 {color: green}
h2 {color: green}
h3 {color: green}
h4 {color: green}
h5 {color: green}
h6 {color: green}
.nadpis {color: green}
#nadpisek {color: green}
Kratší zápis:
h1, h2, h3, h4, h5, h6, .nadpis, #nadpisek {color: green}
Pseudoprvky a pseudotřídy
CSS přidává k prvkům a třídám další informace, které se získají až po zpracování (nebo načtení) HTML dokumentu. Díky tomu můžeme popsat prvek, který je v nějakém stavu (je na něm tabulátor nebo kurzor) nebo je někde jako první (první řádek nebo znak v odstavci, první odstavec v kapitole). Pseudoprvky a pseudotřídy se používají stejně jako třídy, ale před jejich názvem se používá dvojtečka:.Nejpoužívanější pseudotřídy:
- :hover Prvek má tuto pseudotřídu, pokud je nad ním kurzor
- :active Prvek je aktivován (právě se na něj kliknulo)
- :focused Prvek je zaměřen (většinou je na něm tabulátor)
- :link Dosud nenavštívený odkaz
- :visited Navštívený odkaz
- :first-child Prvek má tuto pseudotřídu, pokud je prvním prvkem uvnitř nějakého jiného (rodičovského) prvku
- :first-line První řádek textu v určitém prvku
- :first-letter První znak prvku (pro vytváření iniciál)
/*Nenavštívené odkazy budou modré bez podtržení*/
a:hover {text-decoration: overline}
/*Při najetí se všechny odkazy "nadtrhnou"*/
a:visited:hover {text-decoration: underline}
/*Navštívené odkazy se při najetí místo nadtrhnutí podtrhnou*/