Klasy selektorów <... class>

W jaki sposób przypisać do dowolnego elementu zbiór reguł formatujących, znajdujących się w jednym miejscu, oszczędzając sobie tym samym pisania? Jak przypisać kilka klas CSS do jednego elementu? Co to są podzbiory klas CSS?

Klasy selektorów <... class>

selektor.klasa { cecha: wartość }

Jako klasa należy podać dowolny pojedynczy wyraz, który nie może zawierać znaków: spacji, kropki, przecinka, dwukropka, pytajnika, nawiasów, znaku równości, plusa itp. Może natomiast zawierać litery (A-Z, a-z), cyfry (0-9), myślniki ("-") i podkreślniki ("_"). Lepiej nie używać polskich liter. Nie może się on również rozpoczynać cyfrą ani myślnikiem. Jeśli koniecznie chcemy użyć "zakazanych" znaków, należy w deklaracji klasy poprzedzić je odwróconym ukośnikiem "\", np. reguła: selektor.B\&W\? { cecha: wartość } odpowiada klasie: class="B&W?".

Zdefiniowanie klasy selektorów w części arkuszu stylów, pozwala później się do niej odnosić już we właściwej treści dokumentu. Dzięki temu możemy np. ustalić określone atrybuty dla danego elementu (selektora) na całej stronie, a jednocześnie zmienić wygląd tylko niektórych, bezpośrednio przy nich. Nie musimy już wtedy za każdym razem wpisywać stylu inline, którego zapis czasem może być dosyć długi, ale wystarczy odwołać się do nazwy klasy z arkusza.

Deklaracja klasy jest przydatna szczególnie, jeśli na wielu stronach serwisu znajdują się elementy mające takie samo formatowanie, a dodatkowo nie można dla nich posłużyć się selektorem typu, ponieważ na stronie znajdują się inne znaczniki tego samego rodzaju co wybrany element, ale nie chcemy, aby i one otrzymały takie samo formatowanie. Wtedy np. w zewnętrznym arkuszu stylów umieszczamy deklarację klasy, a następnie na stronach wstawiamy atrybut class="klasa" tylko dla wybranych znaczników. Dzięki temu inne znaczniki tego samego typu zachowają swoje oryginalne formatowanie.

Możliwość definiowania klasy selektorów, jest bardzo ważną i przydatną własnością stylów. Pozwala nam ona zaoszczędzić mnóstwo czasu, który stracilibyśmy, na wpisywanie stylu inline (zwłaszcza w przypadku bardziej skomplikowanych deklaracji). Dlatego warto używać tej własności!

Jeśli jakiś element, o specyficznym rodzaju formatowania, wstępuje przynajmniej raz na niektórych stronach Twojego serwisu (może to być np. główny tytuł strony), jest to znak, że dobrze byłoby umieścić w zewnętrznym arkuszu stylów deklarację jego klasy. Dzięki temu, jeśli później zdecydujemy się zmienić jego formatowanie, nie będziemy musieli modyfikować każdej ze stron, a jedynie zewnętrzny arkusz.

Już na początkowym etapie projektowania serwisu, dobrze jest dokładnie obmyślić, jakie klasy mogą okazać się użyteczne. Im więcej deklaracji klas - odnoszących się do powtarzalnych elementów - umieścisz w zewnętrznym arkuszu stylów, tym szybciej przebiegnie późniejsza ewentualna modyfikacja stron!

Dobrym pomysłem jest również wstawianie komentarza przed każdą deklaracją klasy w arkuszu (znaki: /* ... */), w którym opisuje się jej przeznaczenie. Po jakimś czasie w Twoim arkuszu stylów może znaleźć się tyle klas, że zapomnisz, do jakich elementów się one odnosiły. Wtedy właśnie bardzo przydatny może się okazać wpisany wcześniej komentarz.

Przykład

Jeżeli w arkuszu stylów strony została umieszczona następująca reguła:

p.przyklad_klasa { color: red }

to jeśli teraz w dowolnym miejscu wpiszemy:

<p class="przyklad_klasa">To jest akapit.</p>

na ekranie zobaczymy tekst napisany czcionką koloru czerwonego:

To jest akapit.

Dla porównania, to też jest akapit, ale bez podania klasy i dlatego nie jest czerwony.

W przypadku stosowanie klas, często podczas ich definiowania, nie wiemy jeszcze, w stosunku do jakich znaczników będziemy chcieli je później użyć. Wtedy przydatny okazuje się selektor uniwersalny, który pozwala przypisać własności klasy do wszystkich elementów, którym zostanie ona nadana bez względu na typ znacznika.

Na przykład jeżeli w arkuszu stylów strony została umieszczona następująca reguła:

*.przyklad_uniwersalna { color: red }

Dlatego teraz każdy element, któremu nadamy klasę przyklad_uniwersalna, będzie miał kolor czerwony:

W tym przypadku gwiazdkę (*) w regule stylu można pominąć:

.przyklad_uniwersalna { color: red }

Lista klas

Jeśli chcemy do pojedynczego elementu przypisać kilka różnych klas, należy posłużyć się poleceniem:

<selektor class="klasa1 klasa2 klasa3...">...</selektor>

przy czym klasy: klasa1, klasa2, klasa3 muszą być zdeklarowane w wewnętrznym, zewnętrznym lub importowanym arkuszu stylów.

Kolejność wpisywania nazw klas w wartości atrybutu class="..." nie ma znaczenia na ostateczny sposób formatowania elementu. Jeżeli kilka przypisanych klas odnosi się do tej samej własności, o wyniku decyduje zasada kaskadowości.

Podzbiory klas

(interpretuje: Internet Explorer 7.0, Firefox, Opera, Chrome)

Istnieje możliwość określenia tzw. podzbioru klas, czyli podania, jakie klasy musi mieć jednocześnie przypisane element, aby wybrana reguła CSS miała do niego zastosowanie. Na przykład po wpisaniu:

selektor.klasa1.klasa3 { cecha: wartość }

zmieniony zostanie sposób formatowania elementu:

<selektor class="klasa1 klasa2 klasa3">...</selektor>

Deklaracja taka nie zostanie jednak przypisana w następującym przypadku:

<selektor class="klasa1 klasa2">...</selektor>

Kolejność podawania klas - zarówno w regule CSS, jak i w wartości atrybutu class="..." - nie ma znaczenia.

UWAGA! Microsoft Internet Explorer 6 błędnie interpretuje podzbiory klas, nadając formatowanie elementom, które posiadają przynajmniej ostatnią z klas podanych w regule postaci: selektor.klasa1.klasa3 { cecha: wartość }. W MSIE 7.0 wszystko jest w porządku.

Czyli w tym przypadku w MSIE 6 formatowanie otrzymałyby elementy:

Poprawnie w MSIE 6:
<selektor class="klasa1 klasa2 klasa3">...</selektor>
<selektor class="klasa1 klasa3">...</selektor>
Niepoprawnie w MSIE 6:
<selektor class="klasa2 klasa3">...</selektor>
<selektor class="klasa3 klasa2">...</selektor>
<selektor class="klasa3">...</selektor>

Pytania i odpowiedzi

Co to są klasy w CSS?

Klasy w CSS to nazwy, które w postaci atrybutu class="..." przypisuje się elementom HTML w celu zastosowania do nich określonych stylów. Klasy pozwalają na definiowanie zbioru elementów, które mają być stylizowane w ten sam sposób. Przykład: .klasa { color: blue; }.

Jak wywołać klasę w CSS?

Aby wywołać klasę w CSS, używa się kropki przed nazwą klasy. Następnie, w elemencie HTML, który ma zostać stylizowany, dodaje się atrybut class="..." z nazwą klasy. Przykład: .klasa { color: blue; } i <div class="klasa">Treść</div>.

Jak nazywać klasy w CSS?

Klasy w CSS mogą być nazwane dowolnie, ale dobrze jest stosować opisowe i zrozumiałe nazwy, które odzwierciedlają funkcję lub rolę elementów. Na przykład, zamiast .a lepiej użyć .naglowek, co ułatwia zrozumienie kodu i stylów.

Czym się różni CLASS od ID?

Różnica między CLASS a ID polega na tym, że atrybut class="..." może być używany wielokrotnie na stronie dla wielu elementów, podczas gdy id="..." powinno być unikalne i używane tylko raz dla danego elementu w tym samym pliku HTML. Klasy pozwalają na grupowanie elementów o podobnych właściwościach i stosowanie do nich tych samych stylów, natomiast ID identyfikuje unikalny element na stronie.