CSS elem osztályok

Az előző leckékben az oldal elemeit a tag neve alapján választottuk ki, stílusokat adva például az összes bekezdésnek egyszerre. Egy oldalon azonban különböző típusú bekezdések lehetnek, amelyekre különböző stílusokat kell alkalmazni. A probléma megoldására a különböző bekezdéseket különböző CSS osztályokhoz lehet rendelni.

Ahhoz, hogy egy tagot egy osztályhoz rendeljünk, a tagnek meg kell adni a class attribútumot, amelyben az Ön által kitalált osztálynév áll, betűkből, számokból, aláhúzásjelekből és kötőjelekből állhat.

Nézzünk egy példát. Készítsünk bekezdéseket kétféle osztállyal - eee és zzz:

<p class="eee">
	paragraph with class eee
</p>
<p class="eee">
	paragraph with class eee
</p>
<p class="zzz">
	paragraph with class zzz
</p>
<p class="zzz">
	paragraph with class zzz
</p>

Most pedig forduljunk a CSS-ben a különböző osztályokkal rendelkező bekezdésekhez, és adjunk meg nekik néhány stílust. Például színezzük pirosra a zzz osztállyal rendelkező bekezdéseket, a eee osztállyal rendelkező bekezdéseket pedig zöldre.

Ehhez a CSS fájlban hivatkoznunk kell az osztályainkra. A hivatkozás szintaxisa a következő: először egy pont karakter követi, majd az általunk kitalált osztálynév. Azaz a eee osztály eléréséhez .eee-t kell írni, a zzz osztály eléréséhez pedig .zzz-t kell írni.

Tehát tegyük meg a leírtakat. Adjuk hozzá a HTML kódunkhoz a bevezetett osztályainkhoz tartozó CSS stílusokat is:

.eee {
	color: green;
}
.zzz {
	color: red;
}

Ha elindítjuk a kódunkat, az eredmény a következő lesz:

Adott a következő kód:

<ul>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
</ul>

Színezd pirosra a odd osztállyal rendelkező elemeket, és zöldre az eve osztállyal rendelkező elemeket.

Adott a következő kód:

<h2 class="eee">Title</h2>
<p class="eee">
	paragraph
</p>
<p class="eee">
	paragraph
</p>
<p>
	paragraph without class
</p>

<ul class="eee">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Színezd pirosra az összes eee osztállyal rendelkező elemet.

Magyarázd meg, hogy az előző feladatban miért színeződnek pirosra a li tagek, annak ellenére, hogy a színt beállító osztály a ul taghez van rendelve.