W kaskadowych arkuszach stylów selektor klasy należy zdefiniować za pomocą symbolu
A. . (kropka)
B. : (dwukropek)
C. *
D. #
Pytanie z egzaminu CKE, styczeń 2022 (arkusz E.14-SG-22.01).
Selektor klasy w CSS zapisuje się z kropką, czyli na przykład .menu, .przycisk albo .aktywny. To jest podstawowa składnia zgodna ze standardem CSS i w praktyce używa się jej cały czas przy stylowaniu większych stron. Klasa jest powiązana z atrybutem class w HTML, więc jeśli element ma class='przycisk', to reguła CSS .przycisk { background-color: blue; } zostanie zastosowana właśnie do niego. Duża zaleta klas jest taka, że tę samą klasę można nadać wielu elementom, więc łatwo utrzymać spójny wygląd interfejsu, np. wszystkie przyciski akcji mogą mieć identyczny kolor, marginesy i zaokrąglenia. Moim zdaniem to jeden z najważniejszych mechanizmów w CSS, bo bez klas kod szybko robi się chaotyczny. Dobra praktyka branżowa mówi, żeby nazywać klasy opisowo, np. .card-title zamiast .czerwone, bo wygląd może się kiedyś zmienić, a rola elementu zostaje. Warto też pamiętać, że selektor klasy ma większą szczegółowość niż selektor elementu, ale mniejszą niż selektor identyfikatora.
W CSS różne symbole przed nazwą selektora mają konkretne znaczenie i łatwo je pomylić, szczególnie na początku nauki. Znak # nie oznacza klasy, tylko identyfikator, czyli selektor id. Przykładowo #naglowek odnosi się do elementu z atrybutem id='naglowek'. Identyfikator powinien być unikalny w dokumencie, więc nie jest dobrym wyborem do stylowania wielu podobnych elementów, takich jak przyciski, kafelki czy pozycje menu. Do tego właśnie służą klasy, zapisywane z kropką. Gwiazdka * ma jeszcze inne zadanie: jest selektorem uniwersalnym i wybiera wszystkie elementy na stronie. Czasem stosuje się ją np. przy resetowaniu box-sizing, ale użyta bez namysłu może niepotrzebnie obciążać stylowanie i utrudniać późniejsze nadpisywanie reguł. Dwukropek : też nie definiuje klasy. Służy głównie do pseudoklas, takich jak :hover, :focus czy :first-child, czyli do wskazywania stanu albo szczególnej pozycji elementu. Typowy błąd myślowy polega na zapamiętaniu, że przed selektorem stoi jakiś znak specjalny, ale bez rozróżnienia jego funkcji. W praktyce warto kojarzyć to tak: kropka oznacza class, krzyżyk oznacza id, gwiazdka oznacza wszystko, a dwukropek oznacza stan lub wariant elementu. Taka mapa bardzo pomaga przy czytaniu cudzych arkuszy stylów.