W przedstawionej regule CSS zastosowano selektor
#menu { color: red; }
A. klasy
B. znacznika (typu)
C. atrybutu
D. identyfikatora
Selektor #menu jest selektorem identyfikatora, ponieważ w CSS znak # przed nazwą oznacza odwołanie do atrybutu id w elemencie HTML. Czyli reguła #menu { color: red; } zostanie zastosowana do elementu, który w kodzie strony ma np. id='menu'. W praktyce może to być nawigacja strony, np. nav id='menu', i wtedy tekst w tym konkretnym elemencie zostanie ustawiony na czerwony. To dość podstawowa, ale ważna rzecz w CSS, bo selektory decydują o tym, do których elementów trafią style. Zgodnie z dobrymi praktykami identyfikator powinien być unikalny w obrębie dokumentu HTML, więc id='menu' nie powinno występować kilka razy na jednej stronie. Moim zdaniem warto zapamiętać prostą zasadę: # oznacza id, kropka oznacza klasę, sama nazwa oznacza znacznik. Selektory identyfikatora mają też wysoką specyficzność, więc mogą łatwo nadpisywać style z klas. Dlatego w większych projektach często częściej używa się klas, bo są bardziej elastyczne i mniej problematyczne przy utrzymaniu kodu.
W tej regule nie zastosowano selektora klasy, znacznika ani atrybutu, tylko selektor identyfikatora. W CSS składnia ma tutaj bardzo konkretne znaczenie i jeden znak potrafi całkowicie zmienić działanie reguły. Klasa byłaby zapisana z kropką, na przykład .menu { color: red; }. Taki zapis pasuje do elementów mających class='menu' i można go stosować wielokrotnie na stronie, co jest bardzo wygodne przy stylowaniu wielu podobnych bloków. Częsty błąd polega na tym, że ktoś widzi nazwę menu i od razu myśli o klasie, bo klasy są popularne w CSS, ale trzeba patrzeć na znak przed nazwą. Znak # jasno wskazuje na id. Selektor znacznika, czyli typu, wyglądałby jeszcze inaczej: menu { color: red; } albo częściej np. p { color: red; }, nav { color: red; }. Taki selektor odnosi się do nazwy elementu HTML, a nie do jego atrybutu id. Warto też nie mylić selektora identyfikatora z selektorem atrybutu. Selektor atrybutu zapisuje się w nawiasach kwadratowych, np. [id='menu'] albo [title]. Technicznie [id='menu'] może wskazać podobny element jak #menu, ale to jest inny typ selektora i ma inną specyficzność w kaskadzie CSS. Z mojego doświadczenia takie pomyłki najczęściej wynikają z uczenia się selektorów na pamięć bez patrzenia na składnię. A w CSS składnia jest naprawdę kluczowa, bo przeglądarka interpretuje ją bardzo dosłownie.