Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA PGF4 - STYCZEŃ 2023



PYTANIE NR 38.
Jaki kolor będą miały teksty akapitów utworzone na podstawie przedstawionego arkusza stylów?
<style>
 p{color: yellow;}
 p{color: black;}
 p{color: red;}
 </style>
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
W arkuszu stylów trzy razy zdefiniowano ten sam selektor "p" z tą samą specyficznością. W CSS w takiej sytuacji działa kaskada: gdy reguły mają identyczny priorytet, obowiązuje deklaracja zapisana najpóźniej w kodzie. Ostatnie jest "color: red", więc tekst akapitów będzie czerwony.

Pełne wyjaśnienie:

W przedstawionym fragmencie CSS ten sam selektor p pojawia się trzykrotnie i za każdym razem ustawia właściwość color na inną wartość. Kluczowe jest to, że:

  • wszystkie reguły dotyczą tych samych elementów (akapity, czyli elementy <p>),
  • wszystkie mają taką samą specyficzność (identyczny selektor typu),
  • żadna nie ma dodatkowego priorytetu (np. !important) ani nie wynika z innego źródła o wyższym pierwszeństwie.

W CSS konflikty rozstrzyga kaskada. Jeżeli dwie (lub więcej) deklaracje mają ten sam "poziom ważności" i tę samą specyficzność, wtedy decyduje kolejność w kodzie źródłowym: późniejsza deklaracja nadpisuje wcześniejszą.

Dlatego:

  • "color: yellow" zostaje nadpisane przez późniejsze "color: black",
  • a następnie "color: black" zostaje nadpisane przez ostatnie "color: red".

Poprawny wynik to czerwony, bo ostatnia reguła dla selektora p ustawia kolor na czerwony.

Dlaczego pozostałe odpowiedzi są błędne?

  • "Czarny" byłby poprawny tylko wtedy, gdyby nie było późniejszej deklaracji "color: red" lub gdyby czarny zapis miał wyższy priorytet (np. większą specyficzność albo !important).
  • "Żółty" przegrywa, ponieważ jest zapisany jako pierwszy i zostaje nadpisany przez kolejne reguły o tym samym selektorze.
  • "Zielony" nie występuje w żadnej deklaracji, więc nie może być wynikiem tego arkusza stylów.

Wskazówka egzaminacyjna: gdy widzisz kilka identycznych selektorów bez !important, najpierw porównaj specyficzność, a jeśli jest taka sama, spójrz na to, co jest zapisane najniżej w kodzie.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to jest kaskada CSS i po co ona jest?
Kaskada CSS to mechanizm rozstrzygania konfliktów, gdy kilka reguł pasuje do tego samego elementu. Przeglądarka wybiera wtedy deklarację o wyższym priorytecie, a przy remisie decyduje m.in. specyficzność i kolejność w kodzie. Dzięki temu style mogą się "składać" z wielu źródeł.
Dlaczego w CSS wygrywa ostatnia deklaracja dla tego samego selektora?
Gdy selektory mają tę samą specyficzność i pochodzą z tego samego źródła, działa zasada kolejności źródłowej: reguła zapisana później nadpisuje wcześniejszą. To pozwala łatwo wprowadzać poprawki bez usuwania wcześniejszych zapisów, choć w praktyce warto unikać duplikatów.
Jakie znaczenie ma specyficzność selektora w CSS?
Specyficzność określa "siłę" selektora. Bardziej szczegółowy selektor (np. z klasą lub identyfikatorem) może wygrać z mniej szczegółowym, nawet jeśli jest zapisany wcześniej. Dopiero gdy specyficzność jest równa, rozstrzyga kolejność w kodzie.
Czy !important zmienia wynik kaskady CSS?
Tak. Deklaracja z dopiskiem !important ma wyższy priorytet niż zwykła deklaracja. Może więc "przebić" inne reguły nawet wtedy, gdy jest wcześniej lub ma mniejszą specyficzność. Na egzaminie warto pamiętać, że !important stosuje się ostrożnie, bo utrudnia późniejsze nadpisywanie stylów.
Jak przeglądarka ustala kolor tekstu elementu <p>?
Przeglądarka zbiera wszystkie reguły pasujące do elementu <p>, a potem stosuje kaskadę: bierze pod uwagę ważność (np. !important), pochodzenie stylu, specyficzność selektora oraz kolejność w kodzie. Właściwość color przyjmuje wartość z reguły, która ostatecznie wygrywa.
Jakie są typowe błędy w zadaniach o kolejności reguł CSS?
Najczęściej myli się zasadę "ostatnia reguła wygrywa" z przekonaniem, że pierwsza definicja jest najważniejsza. Drugi błąd to ignorowanie specyficzności (np. klasa zwykle wygra z selektorem typu). Trzeci błąd to pomijanie !important i zakładanie, że wszystko rozstrzyga kolejność.
Czy dwa identyczne selektory w CSS to dobra praktyka?
Zwykle nie. Choć kaskada rozstrzygnie konflikt, duplikaty utrudniają utrzymanie kodu: łatwo przeoczyć, że wcześniejsza deklaracja i tak nie działa. Lepiej łączyć właściwości w jednej regule albo używać bardziej czytelnej struktury plików (np. sekcji tematycznych).
Kiedy warto nadpisywać style przez dopisanie kolejnej reguły?
To bywa przydatne przy szybkich poprawkach, testach lub gdy nie możesz edytować wcześniejszego pliku CSS. W projektach produkcyjnych lepiej robić to świadomie: kontrolować kolejność importów i unikać przypadkowych nadpisań. Na egzaminie kluczowe jest rozumienie, że nadpisanie następuje przy tej samej specyficzności.
Jak sprawdzić w narzędziach deweloperskich, która reguła CSS wygrywa?
W DevTools (np. w Chrome/Firefox) wybierz element i przejdź do zakładki stylów. Zobaczysz listę dopasowanych reguł, a nadpisane deklaracje są zwykle przekreślone. Dzięki temu łatwo ustalisz, czy wygrywa kolejność źródłowa, większa specyficzność, czy np. !important.
Jak przygotować się do pytań o kaskadę CSS na egzaminie?
Ćwicz krótkie przykłady: kilka reguł dla tego samego selektora, różne poziomy specyficzności (typ, klasa, ID) i przypadki z !important. Staraj się zawsze przechodzić tę samą procedurę: ważność → specyficzność → kolejność. To ogranicza pomyłki pod presją czasu.
info

Około 61% zdających odpowiada poprawnie na to pytanie. średnie

W praktyce zawodowej kluczowe jest to, że w arkuszu stylów trzy razy zdefiniowano ten sam selektor "p" z tą samą specyficznością.

Źródła:

  • MDN Web Docs: Cascade and inheritance (CSS) – https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance - accessed 2026-03-04
  • MDN Web Docs: Specificity (CSS) – https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity - accessed 2026-03-04
  • W3C/CSSWG Editor’s Draft: CSS Cascading and Inheritance Level 3 (Cascade) – https://drafts.csswg.org/css-cascade-3/ - accessed 2026-03-04

Materiały:

  • Dokumentacja MDN o kaskadzie i specyficzności CSS
  • Specyfikacja W3C/CSSWG dotycząca kaskady (CSS Cascading and Inheritance)
  • Ćwiczenia praktyczne: tworzenie krótkich arkuszy CSS z konfliktem reguł i sprawdzanie wyników w przeglądarce

Aktualizacja pytania: 03.04.2026



Aktualizacja pytania: 03.04.2026
📡 Brak połączenia internetowego