HTML třídy (classes)

Atribut HTML třídy (class) se používá k určení třídy pro libovolný prvek HTML.

Více HTML prvků může sdílet stejnou třídu.

Použití atributu class

Atribut class se často používá k označení názvu třídy v šabloně stylů. Může být také použit JavaScriptem pro přístup a manipulaci s prvky s konkrétním názvem třídy.

V následujícím příkladu máme tři prvky <div> s atributem class a hodnotou "mesto". Všechny tři prvky <div> budou mít stejný styl podle definice stylu .mesto v sekci <head>:

Příklad 1

<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<style>
.mesto {
    background-color: tomato;
    color: white;
    border: 2px solid black;
    margin: 20px;
    padding: 20px;
}
</style>
</head>
<body>

<div class="mesto">
  <h2>Praha</h2>
  <p>Praha je hlavním městem České republiky.</p>
  <p>Praha má více než 1 milion obyvatel.</p>
</div>

<div class="mesto">
  <h2>Bratislava</h2>
  <p>Bratislava je hlavním městem Slovenské republiky.</p>
  <p>V Bratislavě bydlí přibližně 475 000 obyvatel.</p>
</div>

<div class="mesto">
  <h2>Vídeň</h2>
  <p>Vídeň (německy Wien, rakousko-bavorsky Wean) je hlavním městem Rakouska.</p>
  <p>Vídeň má více než 2 miliony obyvatel.</p>
</div>

</body>
</html>

Výsledek 1

Poznámka: Ve jméně třídy hrají roli velká a malá písmena.
.MESTO ne jiná třída než .mesto

V dalším příkladě máme dva prvky <span> s atributem class s hodnotou "poznamka". Oba dva prvky budou nastylovány stejně.

Příklad 2

<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<style>
.poznamka {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1><span class="poznamka">Důležitý</span> nadpis</h1>
<p>Toto je nějaký <span class="poznamka">důležitý</span> text.</p>

</body>
</html>

Výsledek 2

Syntaxe

Chceme-li vytvořit ve stylu třídu, napíšeme tečku a potom jméno třídy. Potom můžeme nadefinovat stylové vlastnosti dané třídy uvnitř složených závorek {}.

Jeden prvek může být ve více třídách

Příklad 3

<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<style>
.mesto {
    background-color: #a0a0a0;
    color: white;
    border: 2px solid black;
    margin: 20px;
    padding: 20px;
}
.ceske {
	text-align: center;
}
</style>
</head>
<body>

<div class="ceske mesto">
  <h2>Praha</h2>
  <p>Praha je hlavním městem České republiky.</p>
  <p>Praha má více než 1 milion obyvatel.</p>
</div>

<div class="mesto">
  <h2>Bratislava</h2>
  <p>Bratislava je hlavním městem Slovenské republiky.</p>
  <p>V Bratislavě bydlí přibližně 475 000 obyvatel.</p>
</div>

<div class="mesto">
  <h2>Vídeň</h2>
  <p>Vídeň (německy Wien, rakousko-bavorsky Wean) je hlavním městem Rakouska.</p>
  <p>Vídeň má více než 2 miliony obyvatel.</p>
</div>

</body>
</html>

Výsledek 2

Různé prvky mohou sdílet stejnou třídu

To je ukázáno v příkladě č.2

Použití atributu class v JavaScriptu

Javascript je interpretovaný programovací jazyk, ve kterém je možné programově upravovat DOM (Document Object Model). Javascriptové programy běží uvnitř prohlížeče a jsou nezávislé na operačním systému.

Použití Javascriptu

<!DOCTYPE html>
<html>
<body>

<h2>Použití tříd v JavaScriptu</h2>
<p>Kliknutím na tlačítko "Skryj prvky" můžeme skrýt prvky třídy "mesto":</p>
<p>Kliknutím na tlačítko "Obnov prvky" můžeme obnovit prvky třídy "mesto":</p>

<button onclick="hideFunction()">Skryj prvky</button>
<button onclick="showFunction()">Obnov prvky</button>

<div class="mesto">
  <h2>Praha</h2>
  <p>Praha je hlavním městem České republiky.</p>
  <p>Praha má více než 1 milion obyvatel.</p>
</div>

<div class="mesto">
  <h2>Bratislava</h2>
  <p>Bratislava je hlavním městem Slovenské republiky.</p>
  <p>V Bratislavě bydlí přibližně 475 000 obyvatel.</p>
</div>

<div class="mesto">
  <h2>Vídeň</h2>
  <p>Vídeň (německy Wien, rakousko-bavorsky Wean) je hlavním městem Rakouska.</p>
  <p>Vídeň má více než 2 miliony obyvatel.</p>
</div>

<script>
function hideFunction() {
  var x = document.getElementsByClassName("mesto"); (1)
  for (var i = 0; i < x.length; i++) { (2)
    x[i].style.display = "none"; (3)
  }
}
function showFunction() {
  var x = document.getElementsByClassName("mesto"); (4)
  for (var i = 0; i < x.length; i++) { (5)
    x[i].style.display = "block"; (6)
  }
}
</script>

</body>
</html>

1	Funkce getElementsByClassName() mi vrátí v poli všechny prvky třídy "mesto".
2	Pomocí cyklu budu procházet pole.
3	Tady nastavím styl prvku třídy město na display: none; což mi umožní tento prvek skrýt.
4	Funkce getElementsByClassName() mi vrátí v poli všechny prvky třídy "mesto".
5	Pomocí cyklu budu procházet pole.
6	Tady nastavím styl prvku třídy město na display: block; což mi umožní znovu prvek zobrazit.

Výsledek

javascript_class.html

Vůbec nevadí, že kódu zatím nerozumíte, pokud se chcete trochu naučit JavaScript tak se můžete podívat do kapitoly W3schools HTML JavaScript nebo si prostudovat JavaScript Tutorial (v angličtině).

Shrnutí

Atribut HTML třídy (class) určuje jeden nebo více názvů třídy pro prvek.
Třídy se používají v kaskádových stylech (CSS) a při pragramování v JavaScriptu k výběru a přístupu ke konkrétním prvkům.
Atribut class lze použít na jakýkoli prvek HTML.
V názvu třídy se rozlišují velká a malá písmena.
Různé prvky HTML mohou mít stejný název třídy.
JavaScript může přistupovat k prvkům s konkrétním názvem třídy pomocí metody getElementsByClassName().