W stylu CSS przedstawionym w ramce zdefiniowano klasę uzytkownik. Czcionką koloru niebieskiego na stronie będą zapisane
| p.uzytkownik { color: blue; } |
Pytanie z egzaminu CKE, czerwiec 2022 (arkusz EE.09-SG-22.06).
Selektor p.uzytkownik łączy dwa warunki: element musi być akapitem <p> i musi mieć klasę uzytkownik. Kolor niebieski dostanie więc tylko <p class="uzytkownik">. Zwykły akapit bez klasy zostanie bez zmian, tak samo jak <div class="uzytkownik">, bo nie jest akapitem.
Między nazwą znacznika a kropką nie ma spacji i to ważne. Zapis p .uzytkownik ze spacją oznaczałby dowolny element z klasą uzytkownik położony wewnątrz akapitu, czyli zupełnie inną regułę. Sama klasa .uzytkownik bez nazwy znacznika objęłaby każdy element z tą klasą.
Element może mieć kilka klas naraz, np. <p class="uzytkownik wazne">, i nadal spełni ten selektor.
Wybór wszystkich paragrafów bierze się z przeoczenia drugiej części selektora. Wszystkie akapity wybrałby sam selektor p, a tu dopisano jeszcze kropkę i nazwę klasy, które zawężają wybór.
Odpowiedź o dowolnych znacznikach z klasą uzytkownik opisuje selektor .uzytkownik bez nazwy znacznika. Reguła p.uzytkownik wymaga jednak, by element był akapitem, więc nagłówek albo blok div z tą klasą pozostaną w swoim kolorze.
Odpowiedź o znacznikach tekstowych typu <p> i <h1> myli selektor z grupą. Taki zakres dałaby reguła p, h1, i to bez warunku klasy. Prawidłowo: niebieskie będą wyłącznie akapity z przypisaną klasą uzytkownik.
Reguła działa także wtedy, gdy klasa uzytkownik stoi w atrybucie class obok innych klas, np. <p class="uzytkownik nowy">. Ważne jest tylko, by element był akapitem i miał tę klasę.