Selektor CSS

Obsah

    Zobrazit obsah

Selektor CSS vybere prvky HTML, které vás chtít stylovat.

Selektor CSS

Selektory CSS se používají k „vyhledání“ (nebo výběru) prvků HTML, které máte chtít stylovat.

Selektory CSS můžeme rozdělit do pěti kategorií:

  • Jednoduché selektory (vyberte prvky na základě názvu, id, třídy)

  • Voliče kombinátorů (vyberte prvky založené na konkrétním vztahu mezi nimi)

  • Selektor pseudotříd (výběr prvků na základě určitého stavu)

  • Selektory pseudoprvků (vyberte a styling části prvku)

  • Selektory atributů (vyberte prvky na základě atribut nebo hodnotu 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áno na střed, s červenou barvou textu:

p
{
  text-align: center;
  color: red;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-align: center;
  color: red;
} 
</style>
</head>
<body>

<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>

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 ano bývalo vyberte jeden jedinečný prvek!

Chcete-li vybrat prvek s konkrétním ID, napište znak hash (#) a za ním id prvku.

Příklad

Níže uvedené pravidlo CSS se použije na prvek HTML s id="para1":

#para1
{
  text-align: center;
  color: red;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>
</html>

Poznámka: Název ID 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ý znakem jméno 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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p> 

</body>
</html>

Můžete také určit, že třída má ovlivnit 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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p> 

</body>
</html>

HTML prvky může také odkazovat na více než jednu třídu.

Příklad

V tomto příkladu bude prvek <p> stylizován podle class="center" a na class="large":

<p class="center large">This paragraph refers to two classes.</p>

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
  text-align: center;
  color: red;
}

p.large {
  font-size: 300%;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p> 

</body>
</html>

Poznámka: Název třídy nemůže začínat číslem!

Univerzální selektor CSS

Univerzální selektor (*) vybere všechny HTML prvky na stránce.

Příklad

Níže uvedené pravidlo CSS ovlivní každý prvek HTML na stránce:

 *
{
  text-align: center;
  color: blue;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
* {
  text-align: center;
  color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>

Selektor seskupení CSS

Selektor seskupení vybere všechny prvky HTML se stejným stylem definice.

Podívejte se na následující kód CSS (prvky h1, h2 a p mají totéž 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;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>

Všechny jednoduché selektory CSS

Výběr:

#id

Příklad:

#firstname

Příklad popisu: Vybere prvek s id="firstname"

Výběr:

.class

Příklad:

.intro

Příklad popisu: Vybere všechny prvky s class="intro"

Výběr:

element.class

Příklad:

p.intro

Příklad popisu: Vybere pouze prvky <p> s class="intro"

Výběr:

*

Příklad:

*

Příklad popisu: Vybere všechny prvky

Výběr:

element

Příklad:

p

Příklad popisu: Vybere všechny prvky <p>

Výběr:

element,element,..

Příklad:

div, p

Příklad popisu: Vybere všechny prvky <div> a všechny prvky <p>