input[type=number] { background-color: Brown; } Zapis selektora oznacza, że tło będzie brązowe dla
input[type=number] { background-color: Brown; }Zapis selektora oznacza, że tło będzie brązowe dla
A. pól edycyjnych, które są typu numerycznego.
B. wszystkich pól edycyjnych.
C. wszystkich tekstów na stronie.
D. pól edycyjnych, gdy użytkownik wpisze do nich dowolną cyfrę.
Pytanie z egzaminu CKE, czerwiec 2023 (arkusz EE.09-SG-23.06).
Selektor input[type=number] oznacza elementy input, które mają atrybut type ustawiony na wartość number. Czyli reguła CSS background-color: Brown; zostanie zastosowana do pól formularza przeznaczonych do wprowadzania liczb, na przykład pola wieku, liczby sztuk produktu albo ceny. Ważne jest tu to, że CSS nie sprawdza, co użytkownik aktualnie wpisał do pola. Selektor atrybutu patrzy na strukturę dokumentu HTML, a konkretnie na atrybut elementu. Moim zdaniem to jeden z bardziej praktycznych selektorów, bo pozwala stylować formularze bez dopisywania dodatkowych klas typu numeric-field. W standardowej praktyce front-endowej często używa się takich zapisów, np. input[type=email], input[type=password] albo input[type=checkbox], żeby nadać różny wygląd różnym rodzajom kontrolek. Dobrze też pamiętać, że nazwa koloru Brown jest rozpoznawana przez CSS jako słowo kluczowe koloru, choć w projektach zawodowych częściej spotyka się zapis szesnastkowy, rgb albo zmienne CSS, bo łatwiej zachować spójność całego interfejsu.
W tym zapisie łatwo pomylić działanie selektora CSS z działaniem walidacji formularza albo skryptu JavaScript. Selektor input[type=number] nie reaguje na to, czy użytkownik wpisał cyfrę do pola. On działa dużo wcześniej i prościej: przeglądarka znajduje w dokumencie elementy input, których atrybut type ma wartość number, a potem nadaje im wskazany styl. Jeśli pole tekstowe ma type=text i użytkownik wpisze tam 7, ta reguła nadal go nie obejmie, bo atrybut pola nie zmienił się na number. To częsty błąd myślowy, bo słowo number kojarzy się z wpisaną zawartością, a w CSS chodzi tu o cechę elementu HTML. Reguła nie dotyczy też wszystkich tekstów na stronie, ponieważ selektor zaczyna się od input, więc ogranicza wybór tylko do kontrolek formularza tego typu. Nie obejmie akapitów, nagłówków, etykiet ani zwykłych napisów. Nie obejmie również wszystkich pól edycyjnych, bo pola input mogą mieć wiele typów: text, password, email, date, checkbox i inne. Z mojego doświadczenia warto zapamiętać, że selektory atrybutów są bardzo konkretne: wybierają elementy na podstawie ich atrybutów w HTML, a nie na podstawie treści wpisanej przez użytkownika. Do sprawdzania zawartości formularza służy walidacja HTML, właściwości typu required, min, max, pattern albo logika JavaScript, a nie sam selektor CSS.