Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - CZERWIEC 2021



PYTANIE NR 33.
input:focus { background-color: LightGreen; }
W języku CSS zdefiniowano formatowanie dla pola edycyjnego. Tak formatowane pole edycyjne będzie miało jasnozielone tło
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Pseudoklasa :focus działa, gdy element może przyjmować fokus i jest aktualnie aktywny do wprowadzania (np. po kliknięciu w pole lub przejściu do niego klawiszem Tab). Wtedy reguła input:focus nada mu jasnozielone tło. Samo najechanie kursorem to inny stan (:hover).

Pełne wyjaśnienie:

Reguła CSS input:focus { background-color: LightGreen; } składa się z selektora input:focus oraz deklaracji zmieniającej kolor tła. Kluczowe jest tu znaczenie pseudoklasy :focus.

:focus oznacza element, który posiada fokus, czyli jest aktualnie wskazanym elementem interfejsu do interakcji, zwłaszcza do wpisywania danych. Dla pola formularza typu input fokus najczęściej uzyskuje się po kliknięciu w pole, ale także po przejściu do niego klawiaturą (np. Tab). W tym momencie tło pola zostanie ustawione na jasnozielone.

Dlaczego pozostałe odpowiedzi są niepoprawne?

  • "gdy zostanie wskazane kursorem myszy bez kliknięcia." – samo najechanie myszą odpowiada stanowi :hover, a nie :focus. Element może być pod kursorem, ale bez fokusu.
  • "jeśli jest to pierwsze wystąpienie tego znacznika w dokumencie." – CSS nie wiąże :focus z kolejnością wystąpień elementów w HTML. Do tego służą inne selektory (np. dotyczące pozycji w strukturze), nie fokus.
  • "w każdym przypadku." – reguła działa warunkowo: tylko dla elementów input znajdujących się w stanie fokusu. Gdy fokus jest gdzie indziej, tło nie musi być jasnozielone.

Wskazówka egzaminacyjna: jeśli w treści widzisz :focus, myśl "aktywny element do obsługi/edytowania", a jeśli widzisz :hover, myśl "najechanie kursorem". To pomaga szybko odróżnić stany interakcji.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co oznacza pseudoklasa :focus w CSS?

:focus wskazuje element, który ma aktualnie fokus, czyli jest aktywny do interakcji (np. wpisywania tekstu).

W formularzach fokus zwykle pojawia się po kliknięciu w pole albo po dojściu do niego klawiszem Tab.

Jak sprawdzić, kiedy pole input ma fokus?

Najprościej: kliknij w pole i zobacz, czy pojawia się kursor edycji (caret) oraz czy styl z selektora input:focus zaczyna działać.

Możesz też przełączać fokus klawiszem Tab i obserwować zmianę tła/obramowania.

Dlaczego :focus to nie to samo co :hover?

:hover działa przy najechaniu kursorem myszy, nawet bez kliknięcia.

:focus dotyczy aktywnego elementu sterowania (np. pole, przycisk) i jest ważny także dla obsługi klawiaturą. To dwa różne stany interakcji.

Czy fokus można uzyskać bez użycia myszy?

Tak. Fokus można przenosić klawiaturą, najczęściej klawiszem Tab (oraz Shift+Tab wstecz).

Dlatego stylowanie :focus jest istotne dla dostępności: użytkownik powinien widzieć, które pole jest aktualnie aktywne.

Jakie elementy HTML mogą mieć fokus?

Fokus mogą uzyskiwać elementy interaktywne, np. pola formularza (input, textarea), przyciski, linki oraz elementy z ustawionym atrybutem tabindex.

To, czy element jest fokusowalny, zależy od typu elementu i ustawień dostępności.

Co robi właściwość background-color w CSS?

background-color ustawia kolor tła elementu.

W przypadku pola formularza zmieni kolor obszaru, na którym widoczne jest wpisywane tło pola. Dzięki temu można wyróżnić aktywne pole, np. w stanie :focus.

Jak ustawić inny kolor tła pola tylko podczas wpisywania?

Użyj selektora z pseudoklasą fokusu, np. input:focus, i ustaw background-color.

To odpowiada sytuacji, gdy pole jest aktywne do edycji (po kliknięciu lub po wybraniu klawiaturą).

Czy :focus zadziała na każdym elemencie input?

Zasadniczo działa na elementach input, które mogą przyjmować fokus (większość pól formularza).

Jeśli element jest wyłączony (disabled) lub przeglądarka nie pozwala na fokus dla danego typu, styl z :focus może się nie uaktywnić.

Jakie błędy są najczęstsze przy pytaniach o :focus?

Najczęściej myli się :focus z :hover (najechanie myszą) albo zakłada, że styl działa "zawsze".

Warto pamiętać: :focus to stan aktywności elementu, nie sama obecność kursora nad elementem.

Jak przygotować się do zadań egzaminacyjnych z selektorów CSS?

Ćwicz na krótkich przykładach: twórz kilka pól formularza i testuj stany :hover, :focus, :active.

Dobrym nawykiem jest też czytanie selektora "od lewej": element (input) + warunek (fokus).

info

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

Według specjalistów z branży: "Pseudoklasa :focus działa, gdy element może przyjmować fokus i jest aktualnie aktywny do wprowadzania (np. po kliknięciu w pole lub przejściu do niego klawiszem Tab)."

Źródła:

  • MDN Web Docs: ":focus" CSS pseudo-class – https://developer.mozilla.org/en-US/docs/Web/CSS/:focus (dostęp: 2026-02-27)
  • W3C Selectors Level 4: section "The focus pseudo-class: :focus" – https://www.w3.org/TR/selectors-4/#the-focus-pseudo (dostęp: 2026-02-27)
  • MDN Web Docs: "background-color" – https://developer.mozilla.org/en-US/docs/Web/CSS/background-color (dostęp: 2026-02-27)

Materiały:

  • Dokumentacja MDN o pseudoklasie :focus
  • Specyfikacja selektorów CSS (Selectors Level 4) – sekcja o :focus
  • Ćwiczenia praktyczne: formularz HTML z różnymi stanami (:hover, :focus, :active)
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego