Który selektor formatuje akapit o identyfikatorze tekst oraz elementy div o klasie obrazki?
A.
p.tekst + div#obrazki
B.
p#tekst + div.obrazki
C.
p#tekst, div.obrazki
D.
p.tekst, div#obrazki
Selektor p#tekst, div.obrazki jest właściwy, bo składa się z dwóch niezależnych selektorów CSS oddzielonych przecinkiem. Część p#tekst oznacza: wybierz element p, czyli akapit, który ma identyfikator tekst. Znak # w CSS odnosi się do atrybutu id, więc pasuje np. do elementu p id=tekst. Druga część, div.obrazki, oznacza: wybierz element div, który ma klasę obrazki. Kropka wskazuje klasę, czyli atrybut class. Przecinek jest tu bardzo ważny, bo tworzy grupowanie selektorów. Dzięki temu ten sam zestaw reguł można zastosować do różnych elementów, bez powtarzania kodu. W praktyce można napisać p#tekst, div.obrazki { margin: 10px; color: #333; } i oba typy elementów dostaną te same style. Moim zdaniem to jedna z podstawowych rzeczy, które warto dobrze zapamiętać w CSS, bo mocno poprawia czytelność arkusza stylów. Dobra praktyka jest taka, żeby selektory były możliwie jasne i niepotrzebnie nieprzekombinowane. Id powinno być unikalne w dokumencie, a klasa może występować na wielu elementach, dlatego p#tekst wskazuje raczej jeden konkretny akapit, a div.obrazki wiele bloków z grafikami.
W tym pytaniu łatwo pomylić dwa podstawowe oznaczenia w selektorach CSS: # oraz kropkę. Znak # służy do wybierania elementu po identyfikatorze id, natomiast kropka wybiera elementy po klasie class. Jeżeli więc zapisujemy p.tekst, to nie wskazujemy akapitu o identyfikatorze tekst, tylko akapit mający klasę tekst. To zupełnie inny mechanizm, choć nazwa może wyglądać bardzo podobnie. Analogicznie div#obrazki oznacza pojedynczy element div o id obrazki, a nie elementy div o klasie obrazki. W praktyce taka pomyłka powoduje, że style po prostu nie zadziałają na tych elementach, które chcieliśmy sformatować, albo zadziałają na coś innego, jeśli w HTML istnieją podobnie nazwane klasy i identyfikatory. Drugim typowym błędem jest użycie znaku +. W CSS plus oznacza selektor sąsiedniego rodzeństwa, czyli wybiera element znajdujący się bezpośrednio po innym elemencie na tym samym poziomie drzewa DOM. Zapis p#tekst + div.obrazki nie formatuje jednocześnie akapitu i divów. On wybiera tylko div.obrazki, który występuje bezpośrednio po p#tekst. To jest przydatne np. przy stylowaniu elementu zaraz po nagłówku, ale nie przy grupowaniu różnych selektorów. Do grupowania używa się przecinka. Z mojego doświadczenia uczniowie często traktują + jak słowo oraz, ale w CSS to nie działa w ten sposób. Jeśli chcemy objąć regułą dwa niezależne zestawy elementów, zapisujemy je po przecinku: p#tekst, div.obrazki. Taki zapis jest zgodny ze składnią CSS i jest czytelny dla innych osób pracujących nad kodem.