Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - TEST WIEDZY NR 1



PYTANIE NR 10.
W poniższym fragmencie kodu HTML i CSS, który selektor CSS jest odpowiedzialny za stylizację elementów
o klasie "myClass"? 
<style>
    div {
        color: red;
    }
    .myClass {
        color: blue;
    }
</style>
<div class="myClass">Hello, World!</div>
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Selektor .myClass dopasowuje elementy posiadające atrybut class o wartości "myClass", więc reguła color: blue; stylizuje wskazany <div>. Selektor div jest ogólny, a color to właściwość, nie selektor; "Hello, World!" to treść elementu.

Pełne wyjaśnienie:

W CSS selektor określa, które elementy HTML mają otrzymać zadeklarowane właściwości. W pokazanym fragmencie są dwa selektory:

  • div – selektor typu (elementu). Pasuje do wszystkich elementów <div> na stronie i ustawia im color: red;.
  • .myClass – selektor klasy. Pasuje do wszystkich elementów, które mają atrybut class zawierający klasę myClass, i ustawia color: blue;.

Konkretny element w kodzie to: <div class="myClass">Hello, World!</div>. Pasuje on jednocześnie do selektora div (bo jest <div>) oraz do selektora .myClass (bo ma klasę "myClass"). Gdy dwie reguły ustawiają tę samą właściwość (color), działa kaskada i reguła bardziej szczegółowa zwykle wygrywa. Selektor klasy .myClass jest bardziej specyficzny niż selektor typu div, więc ostatecznie tekst będzie niebieski.

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

  • div – to selektor poprawny składniowo, ale nie jest "odpowiedzialny" za styl przypisany klasie; dotyczy wszystkich <div> i w tym przypadku zostaje nadpisany dla elementu z klasą.
  • color – to nazwa właściwości CSS, a nie selektor, więc nie wybiera elementów do stylizowania.
  • Hello, World! – to treść tekstowa wewnątrz elementu HTML, nie element dopasowania w CSS.

Wskazówka egzaminacyjna: rozpoznawaj selektory po składni. Kropka na początku (.nazwa) oznacza selektor klasy, a sama nazwa tagu (div) oznacza selektor typu.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to jest selektor klasy w CSS?
Selektor klasy to zapis zaczynający się kropką, np. .myClass. Dopasowuje on elementy HTML, które w atrybucie class mają podaną klasę. Dzięki temu możesz stylować wybrane elementy niezależnie od ich tagu, np. różne <div> i <p> tą samą klasą.
Jak działa selektor typu div w CSS?
Selektor typu (np. div) wybiera wszystkie elementy danego tagu na stronie. Reguła div { color: red; } nada kolor czerwony wszystkim <div>, o ile nie zostaną one nadpisane przez bardziej specyficzne reguły, np. selektory klas lub identyfikatorów.
Dlaczego .myClass nadpisuje div w podanym kodzie?
Gdy dwie reguły ustawiają tę samą właściwość, działa kaskada i specyficzność. Selektor klasy .myClass jest bardziej specyficzny niż selektor typu div, więc dla elementu posiadającego klasę "myClass" wygrywa reguła z kolorem niebieskim.
Co oznacza kropka przed nazwą w CSS, np. .myClass?
Kropka na początku selektora oznacza, że jest to selektor klasy. Taki selektor dopasowuje elementy, które mają daną klasę w atrybucie class. Przykład: .myClass pasuje do <div class="myClass">...</div>.
Czy właściwość color jest selektorem CSS?
Nie. color to nazwa właściwości CSS, która określa kolor tekstu elementu. Selektor to część przed nawiasem klamrowym, np. div albo .myClass. Właściwości (np. color, font-size) są dopiero wewnątrz bloku deklaracji.
Jak sprawdzić w przeglądarce, która reguła CSS działa na element?
Użyj narzędzi deweloperskich (DevTools): kliknij element prawym przyciskiem i wybierz "Zbadaj". W zakładce stylów zobaczysz listę reguł oraz informację, które deklaracje są aktywne, a które zostały nadpisane. To najszybszy sposób na debugowanie kaskady i specyficzności.
Jakie są najczęstsze błędy przy rozpoznawaniu selektorów CSS na egzaminie?
Typowe pomyłki to: branie właściwości (np. color) za selektor, ignorowanie kropki w .nazwa, mylenie tekstu w elemencie z selektorem oraz automatyczne wybieranie selektora tagu (np. div) bez sprawdzenia, czy w kodzie występuje reguła klasy.
Kiedy używa się selektora klasy zamiast selektora tagu?
Selektora klasy używa się, gdy chcesz stylować tylko część elementów danego typu albo grupę elementów różnych typów w ten sam sposób. Selektor tagu (np. div) jest zbyt ogólny w większych projektach, bo obejmuje wszystkie elementy danego rodzaju.
Jak działa atrybut class w HTML i jak łączy się z CSS?
Atrybut class przypisuje elementowi jedną lub więcej klas (nazw). CSS może je wybierać selektorem klasy, np. .myClass. To podstawowy mechanizm łączenia struktury HTML z wyglądem i zachowaniem komponentów w stylach.
Czy jeden element HTML może pasować do kilku selektorów CSS jednocześnie?
Tak. Element może spełniać warunki wielu selektorów, np. być <div> i mieć klasę "myClass". Wtedy zastosowanie mają reguły kaskady: znaczenie mają specyficzność, kolejność w arkuszu oraz ewentualnie !important. Dlatego warto analizować, które reguły konkurują o tę samą właściwość.
info

To pytanie poprawnie rozwiązuje 81% zdających egzamin. średnio łatwe

Eksperci podkreślają: "Selektor .myClass dopasowuje elementy posiadające atrybut class o wartości "myClass", więc reguła color: blue; stylizuje wskazany &lt;div&gt;."

Źródła:

  • MDN Web Docs: "CSS selectors" (sekcja o class selectors i type selectors), https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors (dostęp: 2026-03-02)
  • MDN Web Docs: "Class selectors" (składnia .classname), https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors (dostęp: 2026-03-02)
  • MDN Web Docs: "Specificity" (zasady rozstrzygania konfliktów reguł), https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity (dostęp: 2026-03-02)

Materiały:

  • Dokumentacja MDN: selektory CSS (type selector, class selector)
  • Dokumentacja MDN: kaskadowość i specyficzność (cascade, specificity)
  • Ćwiczenia praktyczne: inspektor elementów i zakładka Styles w DevTools
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego