Wybieranie selektorów klas CSS

W CSS, selektory klas są wyświetlane za pomocą kropki:

.center {text-align: center}

W powyższym przykładzie, wszystkie elementy HTML o klasie center są wyśrodkowane.

W poniższym kodzie HTML, elementy h1 i p mają klasę center. Oznacza to, że obie będą przestrzegały zasad selektora ".center".

<h1 class="center">
Ten nagłówek będzie wycentrowany
</h1>
<p class="center">
Ten akapit będzie również wycentrowany.
</p>

Uwaga:Pierwszy znak nazwy klasy nie może być cyfrą! Nie działa w Mozilla lub Firefox.

Tak jak id, class może być używany jako pochodny selektor:

.fancy td {
	color: #f60;
	background: #666;
	}

W tym przykładzie, komórki tabeli wewnętrzne większych elementów o nazwie klasy fancy będą wyświetlane z szarym tłem i czarnymi literami. (Wielki element o nazwie klasy fancy może być tabelą lub divem)

Elementy mogą być również wybierane na podstawie ich klasy:

td.fancy {
	color: #f60;
	background: #666;
	}

W powyższym przykładzie, komórki tabeli o nazwie klasy fancy będą miały szare tło i pomarańczowy kolor.

<td class="fancy">

Możesz przypisać klasę fancy do dowolnego elementu tabeli dowolną ilość razy. Komórki oznaczone fancy będą miały szary tło i pomarańczowy kolor. Komórki, które nie mają przypisanej klasy fancy, nie będą miały wpływu na tę regułę. Co więcej, akapity o klasie fancy również nie będą miały szarego tła i pomarańczowego koloru, oczywiście, jakiekolwiek inne elementy oznaczone fancy również nie będą miały wpływu na tę regułę. To wszystko z powodu sposobu, w jaki zapisaliśmy tę regułę, efekt ten jest ograniczony do komórek tabeli oznaczonych fancy (tj. używając elementu td do wyboru klasy fancy).

Związane treści

Jeśli potrzebujesz bardziej zaawansowanej wiedzy na temat selektorów klas, przeczytaj zaawansowane tutorialy CodeW3C.com:Szczegółowe wyjaśnienie selektorów klas CSS.