Aby sformatować wszystkie obrazy zawarte w akapicie za pomocą CSS, należy zastosować selektor 'p img'. Ten selektor wskazuje na wszystkie elementy <img>, które są dziećmi elementów <p>. Jest to przykład selektora potomka, w którym wspomniana struktura oznacza, że styl zostanie zastosowany tylko do obrazów bezpośrednio zagnieżdżonych w akapitach. Przykładowo, jeśli w HTML mamy strukturę <p><img src='obraz.jpg' alt='Obraz'></p>, to stosując 'p img' w arkuszu stylów CSS, możemy np. ustawić szerokość obrazka na 100% oraz dodać marginesy, co doskonale nadaje się do responsywnego projektowania. Kiedy stylujemy obrazy w akapitach, warto również pamiętać o dostępności i optymalizacji pod kątem SEO, dlatego dobrze jest dodać odpowiednie atrybuty alt do wszystkich obrazów. Stosowanie selektorów CSS w ten sposób jest zgodne z najlepszymi praktykami standardów W3C, co zapewnia, że kod jest czytelny i łatwy do utrzymania.
W przypadku odpowiedzi, które nie są poprawne, można zauważyć, że selektor 'p # img' jest błędny, ponieważ 'id' w CSS jest oznaczany przez '#' i powinien być unikalny dla jednego elementu w dokumencie. Nie możemy stosować go w połączeniu z selektorem potomka, jak w tym przypadku, ponieważ sprowadza to do sytuacji, gdzie oczekiwany byłby element <img> z unikalnym id wewnątrz akapitu, co nie jest właściwym podejściem. Z kolei selektor 'p + img' dotyczy sąsiednich elementów, co oznacza, że styl zostanie zastosowany tylko do obrazów, które bezpośrednio następują po akapicie, a nie do wszystkich obrazów wewnątrz akapitów. Taki selektor nie pozwala na stylizowanie obrazów zagnieżdżonych wewnątrz elementów <p>. Natomiast selektor 'p.img' jest błędny, ponieważ sugeruje, że tag <p> posiada klasę 'img', co jest semantycznie niepoprawne. Klasa 'img' powinna być przypisana do elementu <img>, a nie do akapitu. Wszystkie te błędne podejścia do selektorów ukazują, jak istotne jest zrozumienie struktury DOM oraz hierarchii elementów w HTML, aby skutecznie stosować CSS.