W jakim zawodzie przydaje się ta wiedza?

Wiedza ta jest potrzebna w zawodach: TECHNIK INFORMATYK oraz TECHNIK PROGRAMISTA.

Gdzie mogę przećwiczyć więcej pytań z kwalifikacji INF.03?

Więcej pytań z kwalifikacji INF.03 znajdziesz na Zawodowe.edu.pl - darmowa baza pytań CKE z symulatorem egzaminu.

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

Q: Do jakiej kwalifikacji zawodowej należy to pytanie?

To pytanie pochodzi z kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych. Wymagana w zawodach: Technik informatyk, Technik programista.

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>

Poprawny selektor to „p > i”, ponieważ w podanym fragmencie HTML element jest bezpośrednim dzieckiem elementu . Znak „>” oznacza tzw. selektor dziecka (child combinator) w CSS – styl zostanie zastosowany tylko do tych elementów , które znajdują się dokładnie jeden poziom niżej w drzewie DOM, wewnątrz znacznika . Dzięki temu reguła nie obejmie np. zagnieżdżonych głębiej ani występujących poza paragrafem. Moim zdaniem to jeden z ważniejszych niuansów CSS: rozróżnienie selektora potomków (spacja, np. „p i”) od selektora bezpośrednich dzieci („p > i”). Gdyby w stylu użyć „p i”, to reguła zadziałałaby na każde znajdujące się gdziekolwiek w środku , nawet gdyby było schowane np. w lub . Przy prostym przykładzie nie widać różnicy, ale w większych projektach ma to ogromne znaczenie dla precyzji i przewidywalności styli. W praktyce taki selektor „p > i” możesz stosować np. gdy chcesz nadać specyficzny wygląd tylko oznaczonym kursywą fragmentom bezpośrednio w paragrafie, ale nie ruszać użytych w zagnieżdżonych komponentach, widgetach albo ikonach. To jest zgodne z dobrymi praktykami: pisać selektory możliwie precyzyjne, unikając nadmiernie ogólnych reguł, które potem ciężko nadpisać. W dokumentacji CSS (specyfikacja W3C) wszystkie te kombinatory są dokładnie opisane i warto się do nich przyzwyczaić, bo później mocno ułatwiają utrzymanie arkuszy stylów w większych projektach. Dodatkowo warto pamiętać, że tego typu selektory dobrze współpracują z metodologiami jak BEM czy ITCSS, gdzie świadome ograniczanie zasięgu reguł jest kluczowe. Zamiast dokładać zbędne klasy, czasem wystarczy właśnie poprawnie użyty kombinator „>”.

W tym zadaniu kluczowe jest zrozumienie, jak działają różne związki (kombinatory) selektorów w CSS i jak przekładają się one na strukturę drzewa DOM. Cały problem sprowadza się do relacji między znacznikami , i . W kodzie jest bezpośrednim dzieckiem paragrafu, natomiast jest zupełnie osobnym elementem, który nie zawiera w sobie . Jeżeli wybierzemy selektor oparty wyłącznie na listingu nazw znaczników obok siebie, typu „b i”, to w CSS oznacza on: „dowolny element znajdujący się gdziekolwiek wewnątrz elementu ”. W naszym HTML nie ma takiej relacji, bo nie jest potomkiem , więc taki selektor zwyczajnie nie trafi w żaden element. To jest dość typowe myślenie: ktoś patrzy na kolejność znaczników w jednej linii i myli ją z hierarchią zagnieżdżenia. Podobny problem występuje przy użyciu selektora „b > i”. Kombinator „>” oznacza dziecko bezpośrednie, więc „b > i” wybiera tylko te elementy , które są jednym poziomem niżej w środku . Ponownie, w naszym drzewie DOM nie jest dzieckiem , więc reguła w ogóle się nie zastosuje. Z mojego doświadczenia to częsty błąd: patrzymy na tekst „tekstu w pierwszym paragrafie” i intuicyjnie kojarzymy słowa, zamiast spojrzeć, jak naprawdę są zagnieżdżone tagi. Jeszcze inna sytuacja dotyczy selektora „p + i”. Znak „+” to tzw. selektor sąsiadującego rodzeństwa (adjacent sibling). Oznacza: „wybierz element , który stoi w DOM bezpośrednio po elemencie , na tym samym poziomie zagnieżdżenia”. W naszym przykładzie nie jest rodzeństwem , tylko jego wnętrzem, więc ten kombinator kompletnie tu nie pasuje. To też jest dość mylące, bo część osób kojarzy „+” z jakimś rodzajem powiązania, ale nie pamięta, że chodzi o dwa znaczniki obok siebie, a nie jeden w środku drugiego. Podsumowując, wszystkie błędne odpowiedzi ignorują faktyczną strukturę HTML i relacje rodzic–dziecko między elementami. Dobra praktyka jest taka, żeby przed wyborem selektora wyobrazić sobie drzewo DOM albo wręcz rozpisać je w formie wcięć. Dopiero potem dobiera się odpowiedni kombinator: spacja dla dowolnego potomka, „>” dla dziecka, „+” dla sąsiada, „~” dla dalszego rodzeństwa. Świadome korzystanie z tych narzędzi pozwala tworzyć precyzyjne, czytelne i łatwe w utrzymaniu arkusze CSS, zgodne z rekomendacjami W3C i dobrymi praktykami front-endowymi.

Odpowiedzi

Informacja zwrotna