Selektory CSS
Selektor CSS vybere prvky HTML, které chcete upravit.
Selektory CSS
Selektory CSS se používají k „vyhledání“ (nebo výběru) prvků HTML, které chcete upravit.
Selektory CSS můžeme rozdělit do pěti kategorií:
- Jednoduché selektory (vyberte prvky na základě názvu, id, třídy)
- Selektory kombinátorů (vyberte prvky na základě konkrétního vztahu mezi nimi)
- Selektor pseudotříd (výběr prvků na základě určitého stavu)
- Selektory pseudoprvků (výběr a styling části prvku)
- Selektory atributů (výběr prvků na základě atributu nebo hodnoty atributu)
Tato stránka vysvětlí nejzákladnější selektory CSS.
Selektor prvku CSS
Selektor prvku vybírá prvky HTML na základě názvu prvku.
Příklad
Zde budou všechny prvky <p> na stránce zarovnány na střed a budou mít červenou barvu textu:
p
{
text-align: center;
color: red;
}
Selektor ID CSS
Selektor id používá atribut id prvku HTML k výběru konkrétního prvku.
ID prvku je na stránce jedinečné, takže selektor ID se používá k výběru jednoho jedinečného prvku!
Chcete-li vybrat prvek s konkrétním ID, napište znak hash (#) následovaný ID prvku.
Příklad
Níže uvedené pravidlo CSS se použije na prvek HTML s id="para1":
#para1
{
text-align: center;
color: red;
}
Poznámka: Identifikační jméno nemůže začínat číslem!
Selektor třídy CSS
Selektor třídy vybírá prvky HTML se specifickým atributem třídy.
Chcete-li vybrat prvky s konkrétní třídou, napište znak tečky (.) následovaný názvem třídy.
Příklad
V tomto příkladu budou všechny prvky HTML s class="center" červené a zarovnané na střed:
.center {
text-align: center;
color: red;
}
Můžete také určit, že třídou mají být ovlivněny pouze určité prvky HTML.
Příklad
V tomto příkladu budou pouze prvky <p> s class="center" červené a zarovnané na střed:
p.center {
text-align: center;
color: red;
}
Elementy HTML mohou také odkazovat na více než jednu třídu.
Příklad
V tomto příkladu bude prvek <p> stylizován podle class="center" a class="large":
<p class="center large">This paragraph refers to two classes.</p>
Poznámka: Název třídy nemůže začínat číslem!
Univerzální selektor CSS
Univerzální selektor (*) vybere všechny prvky HTML na stránce.
Příklad
Níže uvedené pravidlo CSS ovlivní každý prvek HTML na stránce:
*
{
text-align: center;
color: blue;
}
Selektor seskupení CSS
Selektor seskupení vybere všechny prvky HTML se stejnými definicemi stylu.
Podívejte se na následující kód CSS (prvky h1, h2 a p mají stejné definice stylu):
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}Bude lepší seskupit selektory, abyste minimalizovali kód.
Chcete-li selektory seskupit, oddělte každý selektor čárkou.
Příklad
V tomto příkladu jsme seskupili selektory z výše uvedeného kódu:
h1, h2, p
{
text-align: center;
color: red;
}
Všechny jednoduché selektory CSS
| Selector | Example | Example description |
|---|---|---|
| #id | #firstname | Selects the element with id="firstname" |
| .class | .intro | Selects all elements with class="intro" |
| element.class | p.intro | Selects only <p> elements with class="intro" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |