Na stronie zdefiniowano regułę CSS p i { color: blue; } oraz akapit <p>Tekst <i>pierwszy</i> oraz <span><i>drugi</i></span></p>. Które fragmenty tekstu zostaną wyświetlone na niebiesko?
<i> są potomkami akapitu, więc oba będą niebieskie.<i>, a nie całego akapitu.<i> zagnieżdżony w <span>.<i> leży bezpośrednio w akapicie i również spełnia selektor.Spacja między selektorami to selektor potomka: p i wybiera każdy element <i> znajdujący się gdziekolwiek wewnątrz <p>, niezależnie od głębokości zagnieżdżenia. Pierwszy <i> jest bezpośrednim dzieckiem akapitu, drugi leży w <span>, ale oba są potomkami <p>, więc oba stają się niebieskie.
Inaczej działa selektor dziecka p > i: obejmuje tylko elementy leżące bezpośrednio w akapicie, więc tu zabarwiłby wyłącznie „pierwszy”. Reszta tekstu akapitu, czyli „Tekst” i „oraz”, zostaje w domyślnym kolorze, bo reguła dotyczy tylko znaczników <i>.
Selektory potomka są bardzo częste w arkuszach stylów, bo pozwalają ostylować elementy tylko w wybranej części strony, bez dodawania klas.
Wskazanie samego „pierwszego” fragmentu to typowy efekt pomylenia spacji ze znakiem większości. Tak zadziałałby selektor dziecka p > i, który pomija elementy zagnieżdżone głębiej. Spacja tworzy selektor potomka, a ten obejmuje każdy poziom, także <i> wewnątrz <span>.
Wskazanie samego „drugiego” nie ma uzasadnienia w żadnym selektorze, bo pierwszy <i> leży bezpośrednio w akapicie i spełnia warunek tym bardziej.
Cały akapit zmieniłby kolor przy regule p { color: blue; }. Selektor kończy się jednak na i, a w CSS styl trafia zawsze do elementu wskazanego ostatnim członem selektora. Tekst „Tekst” i „oraz” zostaje więc w kolorze domyślnym.
Analizując regułę CSS, warto czytać selektor od prawej strony: ostatni człon mówi, który element zostanie ostylowany, a wcześniejsze określają, gdzie ten element musi się znajdować w strukturze dokumentu.