Selektor klasy CSS

Selektor klasy CSS służy do przypisywania stylów elementom HTML oznaczonym atrybutem class. W CSS klasę zapisuje się z kropką, np. .niebieski.

Składnia

.niebieski {
  color: blue;
}

Taki styl zostanie zastosowany do każdego elementu, który ma klasę niebieski:

<p class="niebieski">Tekst niebieski</p>
<td class="niebieski">Komórka niebieska</td>

Selektor klasy ograniczony do elementu

Można też wskazać, że klasa ma działać tylko dla konkretnego elementu HTML:

td.niebieski {
  color: blue;
}

td.czerwony {
  color: red;
}

Oznacza to, że styl zostanie zastosowany tylko do elementów <td> mających odpowiednio klasę niebieski albo czerwony.

<td class="niebieski">Niebieska komórka</td>
<td class="czerwony">Czerwona komórka</td>

Ważne na egzaminie

Zapis TD.niebieski i TD.czerwony oznacza zdefiniowanie dwóch klas, nazywanych czasem w starszych pytaniach egzaminacyjnych kategoriami. Nie są to osobne znaczniki HTML, lecz reguły CSS przypisane do elementów z określoną klasą.