Atribút class

Atribút class nastavuje jednu alebo viac tried pre element (pod elementom sa myslí značka).

To sa robí preto, aby bolo možné následne prostredníctvom CSS pristúpiť ku skupine elementov, ktorým je nastavená rovnaká trieda, a aplikovať na ne určité vlastnosti (napríklad zmeniť farbu textu, veľkosť písma a podobne).

Existuje tiež atribút id, ktorý podobne ako atribút class umožňuje vyberať elementy na HTML stránke.

Rozdiel medzi atribútom class a atribútom id je v tom, že class vyberá skupinu elementov (aj keď je daný jednému elementu - neskôr ho možno dať aj inému), kým id vyberá jedinečný element (viac elementov s takýmto id by nemalo byť na stránke webu, inak dôjde ku konfliktu).

Ako pochopiť, čo dať elementu - triedu alebo id? Trieda sa dáva tým elementom, ktoré sa opakujú na stránkach webu (aby sa nemusel niekoľkokrát písať rovnaký CSS kód). Aj keď máte tento element aktuálne jeden, ale cítite, že podobné elementy sa môžu objaviť neskôr - dajte tomuto elementu triedu. Ak ste isti, že takýto element je jedinečný - tak mu dajte id. Hoci v súčasnosti existuje tendencia dávať všetkým elementom triedu, a id nechať pre JavaScript, nie je všeobecne prijatá.

Elementu je možné nastaviť viacero tried, v tomto prípade ich treba uvádzať medzerou oddelené.

Názvy tried musia byť písané anglickými písmenami, číslicami, bez medzier (medzera oddeľuje triedy od seba, namiesto nej je možné použiť podčiarkovník alebo pomlčku). Triedy by nemali začínať číslicou (v HTML5 už je to možné, ale nebude fungovať v starých prehliadačoch).

Mená tried by mali byť dané v anglickom jazyku (a nie v ruštine, len anglickými písmenami!). Mená by mali byť zmysluplné, odrážať podstatu triedy.

Príklad

Dajme všetkým odsekom s triedou test červenú farbu textu:

<p class="test">Odsek s triedou test.</p>
<p>Kontrolný odsek bez triedy.</p>

.test {
	color: red;
}

Príklad . Viacero tried pre element

A tu dajme prvému odseku viacero tried - test1 a test2 (zapíšme ich medzerou oddelené). Trieda test1 nastavuje červenú farbu textu, a trieda test2 nastavuje veľkosť písma na 20px. Druhému odseku je daná len trieda test1 (tento odsek zčervená), a tretiemu odseku - trieda test2 (tento odsek bude mať veľkosť písma 20px). Prvý odsek, ktorý má dve triedy, bude mať súčasne červenú farbu a veľkosť písma 20px:

<p class="test1 test2">Odsek s dvoma triedami test1 a test2.</p>
<p class="test1">Odsek s triedou test1.</p>
<p class="test2">Odsek s triedou test2.</p>
<p>Kontrolný odsek bez tried.</p>

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

Pozri tiež

atribút id,
ktorý nastavuje jedinečné identifikátory elementom