Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Klucz do tego pytania leży w zrozumieniu, jak działa składnia selektorów CSS. Wiele osób patrzy na fragment p.uzytkownik i automatycznie myśli: „to pewnie wszystkie akapity” albo „wszystko z klasą uzytkownik w body”. Tymczasem CSS jest dość precyzyjny. Sam selektor p oznaczałby rzeczywiście wszystkie paragrafy <p> w dokumencie, niezależnie od klas. Natomiast .uzytkownik bez literki przed kropką oznaczałby wszystkie elementy HTML, które mają w atrybucie class wpisane uzytkownik – mogłyby to być <p>, <div>, <span>, <h1> i inne. Właśnie taki zapis spowodowałby nadanie stylu „wszystkim elementom z klasą uzytkownik w body”, o ile oczywiście są w tym zakresie dokumentu. Pojawia się też częsty błąd myślowy, że skoro w pytaniu jest mowa o akapitach i o klasie, to może chodzi o „tylko elementy tekstowe typu <p>, <h1>”. CSS jednak nie rozumie pojęcia „element tekstowy” w taki sposób – <h1> to zupełnie inny typ elementu niż <p>, więc selektor p.uzytkownik nigdy nie dopasuje nagłówka <h1>, nawet jeśli nadasz mu class="uzytkownik". Żeby stylować zarówno <p>, jak i <h1> z tą klasą, trzeba by użyć selektora złożonego: p.uzytkownik, h1.uzytkownik { ... }. Z mojego doświadczenia wynika, że pomieszanie selektora typu, klasy i ich kombinacji to jedna z typowych przyczyn „magicznych” błędów w wyglądzie strony – coś nagle zmienia kolor, bo ktoś użył za szerokiego selektora .uzytkownik zamiast p.uzytkownik, albo odwrotnie, styl „nie działa”, bo autor oczekiwał, że reguła obejmie wszystko z daną klasą, a zawęził ją do konkretnego tagu. Dlatego dobrze jest zawsze czytać selektor od lewej do prawej: najpierw jaki element (p), potem jaka klasa (.uzytkownik). Tylko połączenie tych dwóch warunków powoduje zastosowanie stylu. W aktualnych specyfikacjach CSS (np. Selectors Level 3 i 4) ta logika jest jasno określona i jest standardem we wszystkich nowoczesnych przeglądarkach, więc warto się do niej przyzwyczaić i świadomie z niej korzystać.