Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Question

Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Zawód: Technik informatyk , Technik programista

Kategorie: Tworzenie stron WWW

Którego związku selektorów CSS należy użyć w miejscu znaków zapytania, aby zdefiniowany styl został zastosowany tylko do tekstu „paragrafie”?

<!DOCTYPE html>
<html>
  <head>
    <style>
      ???{letter-spacing: 10px; color: red;}
    </style>
  </head>
  <body>
    <p>Styl <b>tekstu</b> w pierwszym <i>paragrafie</i></p>
  </body>
</html>

Prawidłowy selektor to „b + i”, ponieważ wykorzystuje tzw. selektor sąsiedniego rodzeństwa (adjacent sibling selector). Ten zapis oznacza: wybierz element , który znajduje się bezpośrednio po elemencie , na tym samym poziomie drzewa DOM, czyli ma tego samego rodzica. W naszym przykładzie struktura jest prosta: wewnątrz paragrafu znajduje się tekstu, a zaraz po nim paragrafie. Dokładnie taki układ idealnie pasuje do selektora „b + i”. Dzięki temu styl letter-spacing: 10px i color: red zostanie zastosowany tylko do tekstu w znaczniku , czyli do słowa „paragrafie”, a nie do całego akapitu, ani do . Moim zdaniem to jeden z bardziej niedocenianych selektorów, bo pozwala bardzo precyzyjnie stylować elementy na podstawie ich kontekstu w dokumencie, bez dodawania klas czy identyfikatorów. W praktyce stosuje się go np. do stylowania pierwszego po nagłówku, zmiany wyglądu etykiety formularza, która następuje po jakimś polu, albo do drobnych efektów typograficznych w treści artykułów. W specyfikacji CSS (np. CSS Selectors Level 3 i 4) selektory rodzeństwa są opisane jako mechanizm do zaznaczania elementów na podstawie relacji strukturalnych, co jest dużo bardziej eleganckie niż ręczne „oklejanie” wszystkiego klasami. Warto też pamiętać różnicę między „+” a „~”. „b + i” działa tylko na najbliższe sąsiednie , natomiast „b ~ i” objęłoby wszystkie elementy będące późniejszym rodzeństwem . W tym zadaniu zależy nam tylko na jednym, konkretnym słowie, więc wybór „b + i” jest jak najbardziej zgodny z dobrymi praktykami – selektor jest możliwie wąski i jednoznaczny. To potem procentuje w większych projektach, gdzie czytelne i precyzyjne selektory bardzo ułatwiają utrzymanie arkusza stylów.

W tym zadaniu kluczowe jest zrozumienie, jak działają różne rodzaje selektorów powiązanych w CSS i jak odwzorowują one strukturę DOM. W kodzie HTML mamy element , a w nim kolejno tekstu oraz zaraz po nim paragrafie. Oba są rodzeństwem, mają tego samego rodzica i występują w konkretnej kolejności. To, którą odpowiedź się wybierze, zależy od poprawnego odczytania tej relacji. Zapis „b i” to selektor potomka (descendant selector). Oznacza on: wybierz każdy element , który znajduje się gdziekolwiek wewnątrz elementu , na dowolnym poziomie zagnieżdżenia. W naszym przykładzie nie jest wewnątrz , tylko obok niego, więc taki selektor nic nie znajdzie. To jest dość typowe nieporozumienie: wiele osób myli „potomka” z „rodzeństwem”. Potomek to element zagnieżdżony, a nie kolejny po. Z kolei „b > i” to selektor dziecka (child selector). Jest jeszcze bardziej restrykcyjny – wybiera tylko te elementy , które są bezpośrednimi dziećmi . Czyli musi być natychmiast wewnątrz , bez żadnego pośredniego poziomu. W naszym kodzie znowu ten warunek nie jest spełniony, bo nie jest dzieckiem , tylko jego sąsiadem w tym samym paragrafie. To pokazuje, że zarówno selektor potomka, jak i dziecka są tu po prostu złym typem relacji. Odpowiedź „i + b” odwraca właściwy kierunek. Selektor sąsiedniego rodzeństwa z operatorem „+” działa zawsze w przód: po lewej stronie jest element, który występuje jako pierwszy, po prawej ten, który ma zostać wybrany. „i + b” oznacza więc: wybierz , który stoi bezpośrednio po . W naszym HTML jest odwrotnie – najpierw , potem . To częsty błąd myślowy: ktoś kojarzy poprawny typ selektora („+”), ale nie zwraca uwagi na kolejność elementów. Podsumowując, wszystkie błędne odpowiedzi ignorują prawdziwą relację strukturalną między i . Albo zakładają zagnieżdżenie tam, gdzie go nie ma, albo mylą kierunek selektora sąsiedniego. Dobra praktyka przy pracy z CSS to zawsze patrzenie na drzewo DOM jak na strukturę rodzic–dziecko–rodzeństwo i dobieranie selektora dokładnie do tej relacji. Dzięki temu styl trafia w jeden, konkretny element, zamiast działać przypadkowo lub wcale.

Odpowiedzi

Informacja zwrotna