W stylu CSS zdefiniowano klasę uzytkownik: p.uzytkownik {
color: blue;
}
Na stronie będą wyświetlane czcionką w kolorze niebieskim:
Deklaracja selektora p.uzytkownik oznacza w CSS połączenie selektora typu z selektorem klasy. Innymi słowy: przeglądarka wybierze tylko te elementy <p>, które mają w atrybucie class wpisaną klasę uzytkownik, np. <p class="uzytkownik">Treść</p>. Sama kropka przed nazwą klasy definiuje selektor klasy, a litera p przed kropką zawęża go wyłącznie do paragrafów. Gdyby w stylu było samo .uzytkownik { color: blue; }, wtedy reguła objęłaby wszystkie elementy z tą klasą, niezależnie czy to <p>, <div>, <h1> czy cokolwiek innego.
Moim zdaniem to jedno z podstawowych, ale bardzo ważnych rozróżnień w CSS: kombinacja selektorów pozwala dokładnie kontrolować, które elementy są stylowane. Dzięki temu nie trzeba nadawać unikalnych klas dla każdego typu elementu, tylko łączyć selektor typu (np. p, h1, li) z klasą, gdy jest to potrzebne. W praktyce w projektach spotyka się dużo takich zapisów: np. li.active, a.button-primary, input.error. To pomaga utrzymać porządek w arkuszu stylów i unikać niepotrzebnie szerokiego działania reguł.
Warto też zwrócić uwagę na specyficzność: p.uzytkownik ma większą specyficzność niż samo p, ale mniejszą niż np. #idElementu. Przy konfliktach stylów przeglądarka bierze to pod uwagę. Dobra praktyka jest taka, żeby nie pisać zbyt ogólnych selektorów, które kolorują „pół strony” przypadkiem. Taki selektor jak w pytaniu jest bezpieczny i precyzyjny – wiadomo dokładnie, że kolor niebieski trafi tylko do tych paragrafów, którym świadomie przypiszemy klasę uzytkownik w HTML.
Moim zdaniem to jedno z podstawowych, ale bardzo ważnych rozróżnień w CSS: kombinacja selektorów pozwala dokładnie kontrolować, które elementy są stylowane. Dzięki temu nie trzeba nadawać unikalnych klas dla każdego typu elementu, tylko łączyć selektor typu (np. p, h1, li) z klasą, gdy jest to potrzebne. W praktyce w projektach spotyka się dużo takich zapisów: np. li.active, a.button-primary, input.error. To pomaga utrzymać porządek w arkuszu stylów i unikać niepotrzebnie szerokiego działania reguł.
Warto też zwrócić uwagę na specyficzność: p.uzytkownik ma większą specyficzność niż samo p, ale mniejszą niż np. #idElementu. Przy konfliktach stylów przeglądarka bierze to pod uwagę. Dobra praktyka jest taka, żeby nie pisać zbyt ogólnych selektorów, które kolorują „pół strony” przypadkiem. Taki selektor jak w pytaniu jest bezpieczny i precyzyjny – wiadomo dokładnie, że kolor niebieski trafi tylko do tych paragrafów, którym świadomie przypiszemy klasę uzytkownik w HTML.
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ć.
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ć.