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:

html<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:

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

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

html<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>

html<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>