Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - CZERWIEC 2024



PYTANIE NR 4.
W kaskadowych arkuszach stylów selektor klasy należy zdefiniować za pomocą symbolu
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Selektor klasy w CSS zapisuje się z kropką przed nazwą klasy, np. .box albo .menu. Symbol # dotyczy selektora identyfikatora, * jest selektorem uniwersalnym, a : wprowadza pseudoklasę (np. :hover).

Pełne wyjaśnienie:

W CSS selektor określa, których elementów dotyczy dana reguła stylów. Dla klasy stosuje się zapis z kropką przed nazwą: .nazwaKlasy. Przykład: reguła .przycisk { ... } zastosuje style do wszystkich elementów, które w HTML mają tę klasę (np. atrybut klasy ustawiony na daną wartość).

Pozostałe znaki z odpowiedzi pełnią inne funkcje w selektorach:

  • # wskazuje identyfikator elementu, czyli selektor identyfikatora. Używa się go do elementu o konkretnym identyfikatorze (w praktyce powinien być unikalny w dokumencie). To częsty błąd: klasa jest do wielokrotnego użycia, a identyfikator ma inną semantykę i inne typowe zastosowanie.
  • * to selektor uniwersalny, który pasuje do wszystkich elementów (czasem w połączeniach, np. w obrębie danego kontenera). Nie służy do wskazywania klasy.
  • : wprowadza pseudoklasę, czyli stan/warunek dopasowania, np. :hover, :focus, :first-child. Pseudoklasa nie jest klasą CSS nadaną w HTML, tylko mechanizmem selektora.

Na egzaminie warto zapamiętać prostą regułę: kropka = klasa, krzyżyk = identyfikator, dwukropek = pseudoklasa, gwiazdka = wszystko. Dzięki temu łatwo odróżnisz podstawowe selektory nawet w bardziej złożonych zapisach.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to jest selektor klasy w CSS?
Selektor klasy to zapis w CSS, który wybiera elementy mające określoną klasę. Używa się go, gdy ten sam styl ma dotyczyć wielu elementów. Składnia zaczyna się od kropki, np. .alert, co oznacza: "wszystkie elementy z klasą alert".
Jakim symbolem oznacza się klasę w selektorze CSS?
Klasę w selektorze CSS oznacza się kropką postawioną bez spacji przed nazwą, np. .menu. Dzięki temu przeglądarka wie, że chodzi o dopasowanie po klasie, a nie po identyfikatorze czy stanie elementu.
Dlaczego selektor klasy używa kropki, a nie #?
W CSS przyjęto rozdzielenie składni: kropka służy do klas (wielokrotnego użytku), a # do identyfikatorów (z założenia unikalnych). To rozróżnienie ułatwia czytelność i pozwala szybko rozpoznać, czy styl dotyczy grupy elementów, czy jednego konkretnego.
Co oznacza znak # w CSS?
Znak # w CSS wprowadza selektor identyfikatora, czyli wybiera element o danym identyfikatorze. Przykład: #naglowek dopasuje element z identyfikatorem "naglowek". To inny mechanizm niż klasa i zwykle stosuje się go, gdy potrzebujesz wskazać jeden konkretny element.
Co robi selektor uniwersalny * w CSS?
Selektor * jest selektorem uniwersalnym i pasuje do wszystkich elementów. Bywa używany np. do resetu stylów lub w złożonych selektorach. Nie służy do wskazywania klasy. Jeśli w pytaniu pojawia się * jako odpowiedź, zwykle jest to dystraktor sprawdzający znajomość podstaw.
Co oznacza dwukropek w selektorach CSS?
Dwukropek : w CSS wprowadza pseudoklasy, czyli warunki/stany dopasowania. Przykłady to :hover (najechanie), :focus (fokus), :first-child (pierwsze dziecko). To nie jest zapis klasy nadanej w HTML, tylko część logiki selektora.
Jak wygląda przykład użycia selektora klasy w praktyce?
Praktyczny przykład: chcesz, aby wszystkie przyciski wyglądały tak samo. Nadajesz elementom klasę (np. "przycisk"), a w CSS piszesz regułę .przycisk { ... }. Dzięki temu jednym selektorem obejmujesz wiele elementów bez kopiowania stylów dla każdego z osobna.
Jaka jest różnica między klasą a identyfikatorem w HTML i CSS?
Klasa może występować na wielu elementach, więc dobrze nadaje się do wspólnych stylów i komponentów. Identyfikator powinien być unikalny w dokumencie i częściej służy do wskazania konkretnego elementu. W CSS rozpoznasz je po składni: klasa ma kropkę, identyfikator ma #.
Czy jeden element może mieć kilka klas i jak to wpływa na selektory?
Tak, element może mieć kilka klas, co ułatwia budowanie komponentów. W CSS możesz dopasować element po jednej klasie (np. .karta) albo po kombinacji (np. .karta.istotna), co oznacza: element musi mieć jednocześnie obie klasy. To częsty temat w zadaniach praktycznych.
Jakie błędy najczęściej popełnia się przy zapisie selektorów klasy na egzaminie?
Najczęstsze pomyłki to: użycie # zamiast kropki, dopisanie spacji między kropką a nazwą klasy oraz mylenie pseudoklas z klasami (np. traktowanie :hover jako klasy). Warto ćwiczyć krótkie przykłady selektorów i kojarzyć każdy symbol z jego rolą.
info

Około 77% zdających odpowiada poprawnie na to pytanie. średnio łatwe

Eksperci podkreślają: "Selektor klasy w CSS zapisuje się z kropką przed nazwą klasy, np. .box albo .menu."

Źródła:

  • MDN Web Docs: "Class selectors" (CSS Selectors) — https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors (dostęp: 2026-03-02)
  • MDN Web Docs: "ID selectors" — https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors (dostęp: 2026-03-02)
  • W3C: Selectors Level 3, sekcja "Class selectors" — https://www.w3.org/TR/selectors-3/#class-html (dostęp: 2026-03-02)

Materiały:

  • Dokumentacja MDN Web Docs: selektory CSS (sekcja o selektorze klasy)
  • Specyfikacja W3C Selectors Level 3/4 (opis selektorów i ich składni)
  • Kursy wprowadzające do CSS obejmujące selektory i pseudoklasy
Zobacz też:

Aktualizacja pytania: 03.04.2026



Aktualizacja pytania: 03.04.2026
📡 Brak połączenia internetowego