Klasy elementów w CSS

W poprzednich lekcjach wybieraliśmy elementy strony po nazwie tagu, nadając style, na przykład, wszystkim akapitom jednocześnie. Na stronie mogą jednak znajdować się akapity różnych typów, do których należy stosować różne style. Aby rozwiązać ten problem, można przypisać różne akapity do różnych CSS klas.

Aby przypisać tag do jakiejś klasy, należy mu nadać atrybut class, a w nim – wymyśloną przez Ciebie nazwę klasy, składającą się z liter, cyfr, znaków podkreślenia i myślnika.

Spójrzmy na przykład. Stwórzmy akapity z dwoma typami klas – eee i 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>

Odnajdźmy teraz w CSS akapity z różnymi klasami i nadajmy im jakieś style. Na przykład pokolorujmy akapity z klasą zzz na czerwono, a akapity z klasą eee – na zielono.

Aby to zrobić, w pliku CSS należy odwołać się do naszych klas. Odwołanie ma następującą składnię: najpierw występuje symbol kropki, a potem wymyślona przez nas nazwa klasy. Czyli aby odwołać się do klasy eee, należy napisać .eee, a dla klasy zzz – napisać .zzz.

Zróbmy więc, jak opisano. Dodajmy do naszego HTML także style CSS dla wprowadzonych przez nas klas:

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

Jeśli uruchomimy nasz kod, w wyniku otrzymamy następujące:

Dany jest następujący kod:

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

Pokoloruj na czerwono elementy z klasą odd i na zielono – elementy z klasą eve.

Dany jest następujący kod:

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

Pokoloruj na czerwono wszystkie elementy z klasą eee.

Wyjaśnij, dlaczego w poprzednim zadaniu na czerwono kolorują się tagi li, chociaż klasa, ustawiająca kolor, jest przypisana do tagu ul.