Atribut class

Atribut class nastavuje jednu nebo více tříd pro element (pod elementem se míní tag).

To se dělá proto, aby bylo možné následně přistoupit přes CSS ke skupině elementů, kterým je nastavena stejná třída, a aplikovat na ně určité vlastnosti (například změnit barvu textu, velikost písma a tak dále).

Existuje také atribut id, který podobně jako atribut class umožňuje vybírat elementy na HTML stránce.

Rozdíl mezi atributem class a atributem id je v tom, že class vybírá skupinu elementů (i když je dán jednomu elementu - lze jej následně dát i jinému), zatímco id vybírá jedinečný element (na stránce webu by neměl být více než jeden element s takovým id, jinak dojde ke konfliktu).

Jak poznat, co dát elementu - třídu nebo id? Třída se dává těm elementům, které se opakují na stránkách webu (aby se nemusel psát stejný CSS kód vícekrát). I když máte nyní daný element jeden, ale cítíte, že podobné elementy se mohou objevit později - dejte tomuto elementu třídu. Pokud jste si jisti, že takový element je jedinečný - dejte mu id. Ačkoli v současnosti existuje tendence dávat všem elementům třídu a id ponechat pro JavaScript, není to obecně přijímané pravidlo.

Elementu lze nastavit více tříd, v takovém případě je třeba je uvádět mezerou.

Názvy tříd musí být psány anglickými písmeny, číslicemi, bez mezer (mezera odděluje třídy od sebe, místo ní lze použít podtržítko nebo pomlčku). Třídy by neměly začínat číslicí (v HTML5 již lze, ale nebude fungovat ve starých prohlížečích).

Názvy tříd by měly být v anglickém jazyce (a ne v ruštině, prostě anglickými písmeny!). Názvy by měly být smysluplné, měly by odrážet podstatu třídy.

Příklad

Nastavme všem odstavcům s třídou test červenou barvu textu:

<p class="test">Odstavec s třídou test.</p>
<p>Kontrolní odstavec bez třídy.</p>

.test {
	color: red;
}

Příklad . Několik tříd pro element

A zde dejme prvnímu odstavci několik tříd - test1 a test2 (zapišme je mezerou). Třída test1 nastavuje červenou barvu textu, a třída test2 nastavuje velikost písma na 20px. Druhému odstavci byla dána pouze třída test1 (tento odstavec zbělá červený), a třetímu odstavci - třída test2 (tento odstavec bude mít velikost písma 20px). První odstavec, který má dvě třídy, bude mít současně jak červenou barvu, tak velikost písma 20px:

<p class="test1 test2">Odstavec se dvěma třídami test1 a test2.</p>
<p class="test1">Odstavec s třídou test1.</p>
<p class="test2">Odstavec s třídou test2.</p>
<p>Kontrolní odstavec bez tříd.</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

Viz také

atribut id,
který nastavuje elementům jedinečné identifikátory