Klasy selektorów CSS <div class>

Niemal na każdej stronie WWW znajdują się pewne powtarzające się elementy. Może to być np. menu nawigacyjne, nagłówek czy stopka serwisu. W jaki sposób ustalać im wygląd? Do tej pory jako selektorów używaliśmy nazw znaczników. Jednak w języku HTML istnieje ściśle określona lista znaczników i nie możemy definiować sobie nowego za każdym razem, kiedy potrzebujemy wstawić na stronie kolejny powtarzający się element. Robi się to w inny sposób - korzystając z tzw. klas selektorów.

Załóżmy, że mamy na stronie menu nawigacyjne, któremu chcemy zmienić kolor tła oraz tekstu. W tym celu najpierw w dokumencie HTML obejmujemy całą zawartość tego menu dodatkowym znacznikiem z przypisanym atrybutem class:

<div class="menu-nawigacyjne">...</div>

Następnie w arkuszu stylów w miejsce selektora wstawiamy wartość atrybutu class - czyli nazwę klasy - poprzedzoną znakiem kropki:

.menu-nawigacyjne {
	background-color: gray;
	color: silver;
}

Zwróć uwagę, że w kodzie HTML wartość atrybutu class nie zawiera znaku kropki - trzeba ją dodać tylko w arkuszu stylów. Należy jednak pamiętać, że pomiędzy znakiem kropki a nazwą klasy w selektorze nie może być żadnych białych znaków - nawet spacji. W samej nazwie klasy najlepiej używać wyłącznie małych liter bez polskich znaków diakrytycznych. Nazwa klasy nie może również zawierać spacji - zamiast niej możesz użyć np. znaku myślnika.

Co ważne, nawet jeśli ustaliliśmy kolor tła oraz tekstu na całej stronie, menu nawigacyjne nadal może mieć swoje własne kolory. Deklaracje wyglądu przypisane do klasy są ważniejsze niż te przypisane do znacznika.

Możemy nawet określić oddzielny kolor odsyłaczy, które znajdują się w menu. Robi się to poprzedzając w selektorze właściwe znaczniki nazwą klasy. W tym przypadku spacja pomiędzy nazwą klasy a nazwą znacznika odsyłacza jest konieczna.

.menu-nawigacyjne a {
	color: black;
}

.menu-nawigacyjne a:hover {
	color: white;
}

Dzięki temu prostemu wpisowi w arkuszu stylów, za każdym razem kiedy na dowolnej podstronie serwisu umieścimy następujący kod:

<div class="menu-nawigacyjne">
	<a href="...">...</a>
	<a href="...">...</a>
	<a href="...">...</a>
</div>

w przeglądarce internetowej wyświetli się bloczek, w którym każdy odsyłacz będzie miał kolor czarny (black), a po wskazaniu go myszą zmieni się na biały (white).

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości tworzenia klas CSS na stronach internetowych, zobacz rozdziały: Klasy selektorów, Selektor potomka.