Co oznacza selektor CSS p > i { color: red; }?
Źle. To opisywałby raczej grupowanie selektorów przecinkiem.
Dobrze.
> to selektor dziecka bezpośredniego.Źle. To opisywałby
p.i, a nie p > i.Źle. Selektor nie wyklucza
<i>.Znak
> w selektorze oznacza „bezpośrednie dziecko”, więc p > i trafia tylko w te <i>, które leżą wprost wewnątrz <p> (na pierwszym poziomie zagnieżdżenia), a nie głębiej. Reguła p > i { color: red; } pokoloruje taki tekst na czerwono. Dlatego selektor dotyczy <i> bezpośrednio w <p>.Pozostałe interpretacje są błędne. „Tekst w
<p> lub <i>” opisywałby selektor grupujący z przecinkiem (p, i), a „<p> z klasą i” to p.i. Znak > nie znaczy „oprócz” ani nie sięga elementów zagnieżdżonych głębiej. p > i celuje w <i> będące bezpośrednim dzieckiem <p>.