Selektor klasy w CSS

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Selektor klasy w CSS służy do nadawania stylów elementom HTML, które mają określoną wartość atrybutu class. Do zapisania selektora klasy używa się kropki . przed nazwą klasy.

Składnia

.nazwaKlasy {
  właściwość: wartość;
}

Przykład:

<p class="ostrzezenie">Uwaga!</p>

.ostrzezenie {
  color: red;
  font-weight: bold;
}

W tym przykładzie styl zostanie zastosowany do każdego elementu, który ma class="ostrzezenie".

Najważniejsze zasady

  • selektor klasy zaczyna się od kropki: .menu, .active, .box,
  • w HTML przy atrybucie class nie zapisuje się kropki,
  • ta sama klasa może być użyta na wielu elementach,
  • jeden element może mieć kilka klas, np. class="box active".

Porównanie z innymi selektorami

.klasa     /* selektor klasy */
#id        /* selektor identyfikatora */
*          /* selektor uniwersalny */
p          /* selektor elementu */
a:hover    /* pseudoklasa */

Na egzaminie INF.03 trzeba pamiętać, że klasę w CSS oznacza kropka, natomiast znak # dotyczy identyfikatora id.