CSS/Selektory klas i identyfikatorów

Z Wikibooks, biblioteki wolnych podręczników.

Selektory elementów mają jedną wadę: można za ich pomocą przypisać styl tylko do konkretnego typu elementów. Aby móc przypisać styl do elementów pełniących konkretną rolę (wizualną) w dokumencie należy zastosować selektor klasy lub selektor identyfikatora.

[edytuj] Selektor klas

.klasa {atrybut:wartość;}

Wybiera elementy, które w atrybucie class mają wartość klasa (bez kropki). Zarówno z samą wartością klasa jak i wtedy gdy klasa jest jedną z wartości oddzielonych od siebie odstępem.

Wszystkie poniższe elementy zostaną objęte stylem przypisanym do klasy .uwydatnienie

<p class="uwydatnienie">Szczególny akapit</p>

<span class="czerwony uwydatnienie">Kolorowa sekcja</span>

<div class="duzy uwydatnienie szeroki">Ważna informacja</div>

Może istnieć wiele elementów przypisanych do jednej klasy w jednym dokumencie.

[edytuj] Selektor identyfikatora

#identyfikator {atrybut:wartość;}

Wybiera element którego id jest równe identyfikator np.

<p id="identyfikator">Oznaczony akapit</p>

Tak samo jak w przypadku selektora klas, selektor identyfikatora może dotyczyć różnych elementów. Różnica polega na tym, że element o danym id może być jeden i tylko jeden w całym dokumencie.Stąd też ten sposób oznaczania powinien być zastosowany do tych elementów ,które są unikalne dla całej strony.