Aby zdefiniować styl akapitu <p>, który występuje bezpośrednio po znaczniku <img>, należy w arkuszu CSS zastosować selektor:
Dobrze.
img + p (selektor sąsiadujący) wybiera akapit <p> zaraz po <img>.Źle.
img > p (selektor dziecka) wybiera akapity bezpośrednio zawarte w <img>.Źle.
img [p] to błędny zapis - w nawiasach podaje się atrybuty, nie nazwy znaczników.Źle.
img p (selektor potomka) wybiera akapity zagnieżdżone wewnątrz obrazu, co nie ma sensu.Akapit występujący bezpośrednio po obrazie wybiera selektor sąsiadujący
img + p. Operator + oznacza element, który jest następnym rodzeństwem (sąsiadem) poprzedzającego - tu: pierwszy <p> stojący tuż po <img> na tym samym poziomie. Dzięki temu stylujesz dokładnie ten jeden akapit, nie ruszając pozostałych. Dlatego poprawny jest img + p.Te selektory różnią się rodzajem powiązania między elementami.
img p ze spacją to selektor potomka - odnosi się do akapitów znajdujących się wewnątrz obrazu, co jest niemożliwe, bo <img> nie zawiera treści. img > p z operatorem > wybiera bezpośrednie dzieci elementu, więc również szuka <p> w środku <img>. Zapis img [p] jest po prostu błędny - nawiasy kwadratowe w CSS służą do dopasowania po atrybutach, a nie po nazwie znacznika. Akapit stojący tuż za obrazem, jako jego sąsiad, wskazuje selektor img + p z operatorem sąsiedztwa.