Selektory#

Selektor klasy#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
.class { /* deklaracje */ }

Selektor klasy (class selector) składa się ze znaku kropki (U+002E, .), po którym następuje identyfikator CSS. Selektor ten reprezentuje element przynależący do klasy pasującej do identyfikatora, jak określono w języku dokumentu.

Dla przykładu, w językach HTML, SVG lub MATHML przynależność do klasy jest ustalana za pomocą atrybutu class; w językach tych selektor klasy jest równoważny z notacją ~= stosowaną w lokalnym atrybucie class (np. [class~=identyfikator]).

Możemy przypisać informacje o stylu do wszystkich elementów z klasą class~="pastoral" w następujący sposób:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
*.pastoral { color: green; }

/* lub po prostu */

.pastoral { color: green; }

W kolejnym przykładzie przypisujemy styl tylko do elementów H1 z klasą class~="pastoral":

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
H1.pastoral { color: green; }

Możliwe jest jednoczesne dopasowywanie wielu klas przez selektor, wystarczy każdą kolejną nazwę klasy poprzedzić znakiem kropki:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
p.pastoral.marine { color: green; }

/* co jest równoważne */

p[class~=pastoral][class~=marine] { color: green; }

Powyższa reguła dopasuje akapity z atrybutem class="pastoral blue aqua marine", ale pominie warianty z class="pastoral blue". Czyli wszystkie nazwy klas wyszczególnione w selektorze muszą być zawarte w atrybucie class. Kolejność podawania klas, zarówno w selektorze jak i atrybucie class, jest nieistotna.

Każdy dodatkowy selektor klasy zwiększa ogólną specyficzność selektora o kolejne 0,1,0.

Ponieważ CSS nadaje dużą moc atrybutowi class, autorzy mogliby zechcieć zaprojektować swój własny "język dokumentu" na podstawie elementów, które nie posiadają prawie żadnych informacji prezentacyjnych (np. DIV lub SPAN w HTML-u), a następnie przypisać im informacje stylów za pomocą atrybutu class. Autorzy powinni unikać takiej praktyki ponieważ elementy strukturalne języka dokumentu zazwyczaj niosą ze sobą semantyczne znaczenie, kiedy klasy zdefiniowane przez autora są jej pozbawione.

Jeśli element ma wiele atrybutów klas, to przed poszukiwaniem konkretnych klas ich wartości muszą zostać połączone w jedną wartość, gdzie separatorem będzie spacja. Na dzień dzisiejszy grupie roboczej CSS nie jest znana żadna taka praktyczna implementacja, dlatego zachowanie to jest oznaczane w specyfikacji jako wyraźnie nienormatywne. Nie należy tego mylić z niedozwolonym powielaniem tego samego atrybutu w elemencie, jak w przypadku <p class="wysoki" class="chudy">...</p>, gdzie uwzględniony zostałby tylko pierwszy z nich.

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!DOCTYPE html>
<html>

<head>

	<style>

		.important {color: blue;}
		.border {border: 3px solid;}
		.important.border {background-color: white;}
		.important.border.size {font-size: 24px;} /* brak zastosowania */

	</style>

</head>

<body>

	<p>Akapit powinien mieć kolor czarny (brak class="").</p>

	<p class="important">Akapit powinien mieć kolor niebieski (class="important").</p>

	<p class="border">Akapit powinien mieć obramowanie (class="border").</p>

	<p class="border important next">Akapit powinien mieć kolor niebieski, obramowanie i białe tło (class="border important next").</p>

	<!-- Błędny kod HTML - powielanie tego samego atrybutu jest zabronione! -->
	<p class="important" class="border" >Akapit powinien mieć tylko kolor niebieski (class="important" class="border").</p>

</body>

</html>

W ramach uzupełnienia warto zapoznać się z opisem metody getElementsByClassName() w interfejsach Document i Element.

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Selektory (H1) Selektor klasy (H2) Specyfikacje i inne materiały (H3)