W kaskadowych arkuszach stylów (CSS) selektor klasy zapisuje się przez postawienie kropki przed nazwą klasy, np. .menu lub .button. Taki selektor dopasowuje wszystkie elementy HTML, które mają daną klasę w atrybucie class (np. class="menu").
Pozostałe symbole odnoszą się do innych rodzajów selektorów:
- : (dwukropek) służy do zapisu pseudoklas, czyli stanów lub relacji elementu, np. :hover, :focus, :first-child. To nie jest selektor klasy.
- # oznacza selektor identyfikatora (id), np. #header. Id powinno być unikalne w obrębie dokumentu, a klasa może występować na wielu elementach.
- * to selektor uniwersalny, który dopasowuje wszystkie elementy (lub wszystkie w danym kontekście), np. * { box-sizing: border-box; }.
Na egzaminie warto pamiętać prostą regułę: kropka = klasa, kratka = id, dwukropek = pseudoklasa, gwiazdka = wszystkie elementy. Dzięki temu łatwo unika się typowej pomyłki między klasą i identyfikatorem oraz nie myli się pseudoklas ze zwykłymi selektorami.
