A class attribútum

A class attribútum egy vagy több osztályt határoz meg az elem számára (elem alatt a címkét értjük).

Ezt azért tesszük, hogy aztán a CSS segítségével hozzájuk fordulhassunk azon elemek csoportjához, amelyeknek ugyanaz az osztálya van megadva, és alkalmazzunk rájuk bizonyos tulajdonságokat (például változtassuk meg a szöveg színét, a betűméretet és így tovább).

Létezik továbbá az id attribútum is, amely a class attribútumhoz hasonlóan lehetővé teszi elemek kiválasztását a HTML oldalon.

A class attribútum és az id attribútum közötti különbség az, hogy a class egy csoportot választ ki (még akkor is, ha csak egy elem kapja meg - később megadhatjuk másnak is), míg a id egy egyedi elemet választ ki (nem fordulhat elő ennél több ilyen id-val rendelkező elem az oldalon, különben konfliktus alakul ki).

Hogyan érthetjük meg, hogy mit adjunk egy elemnek - osztályt vagy id-t? Osztályt azok az elemek kapnak, amelyek ismétlődnek az oldalakon (hogy ne kelljen többször ugyanazt a CSS kódot írni). Még ha jelenleg ez az elem csak egy is, de úgy érzi, hogy hasonló elemek megjelenhetnek a jövőben - adjon osztályt ennek az elemnek. Ha pedig biztos abban, hogy az elem egyedi - akkor adjon neki id-t. Bár jelenleg van egy tendencia, hogy minden elemnek osztályt adjunk, az id-t pedig a JavaScript számára hagyjuk, de ez nem általánosan elfogadott.

Egy elemnek több osztályt is megadhatunk, ebben az esetben szóközzel elválasztva kell felsorolni azokat.

Az osztályok neveinek angol betűkkel, számokkal kell állniuk, szóközök nélkül (a szóköz elválasztja az osztályokat egymástól, helyette használhatunk alulvonást vagy kötőjelet). Az osztályok nevei nem kezdődhetnek számmal (a HTML5-ben már lehet, de nem fog működni a régi böngészőkben).

Az osztályok neveit angol nyelven kell megadni (és nem oroszul, csak angol betűkkel!). A neveknek értelmeseknek kell lenniük, tükrözniük kell az osztály lényegét.

Példa

Adjunk minden, a test osztállyal rendelkező bekezdésnek piros szövegszínt:

<p class="test">Bekezdés test osztállyal.</p>
<p>Vezérlő bekezdés osztály nélkül.</p>

.test {
	color: red;
}

Példa . Több osztály egy elem számára

Itt pedig adjunk az első bekezdésnek több osztályt - a test1 és a test2 osztályt (írjuk le őket szóközzel elválasztva). A test1 osztály piros szövegszínt ad, a test2 osztály pedig 20px betűméretet ad. A második bekezdés csak a test1 osztályt kapta meg (ez a bekezdés piros lesz), a harmadik bekezdés pedig a test2 osztályt (ennek a bekezdésnek 20px-es betűmérete lesz). Az első bekezdés, amelynek két osztálya van, egyszerre lesz piros és 20px-es betűméretű:

<p class="test1 test2">Bekezdés test1 és test2 osztályokkal.</p>
<p class="test1">Bekezdés test1 osztállyal.</p>
<p class="test2">Bekezdés test2 osztállyal.</p>
<p>Vezérlő bekezdés osztályok nélkül.</p>

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

Lásd még

a id attribútum,
amely egyedi azonosítókat határoz meg az elemek számára