Selektory#
Kombinator potomka ( )#
E F { /* deklaracje */ }Czasami autorzy mogą potrzebować selektorów do opisu elementu, który jest potomkiem innego elementu w drzewie dokumentu (np. elementu EM zawartego w elemencie H1). Kombinator potomka wyraża taką relacje. Kombinator potomka # (descendant combinator) jest białym znakiem oddzielającym dwa selektory złożone. Selektor w postaci "A B" reprezentuje element B, który jest potomkiem elementu A (w tym wypadku sam element A jest przodkiem dla elementu B).
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
div em {color: red;}
p * strong {color: blue;}
</style>
</head>
<body>
<div>
ten tekst wewnątrz DIV jest czarny
<span><em>a ten jest czerwony bo EM jest potomkiem DIV,</em></span>
ten tekst wewnątrz DIV jest znowu czarny
</div>
<p>
ten tekst wewnątrz P jest czarny,
<strong>a ten jest dalej czarny bo STRONG pojawia się bezpośrednio w P (nie ma innego przodka),</strong></span>
<span><strong>tym razem przodkiem STRONG jest jakiś element (SPAN, którego przodkiem jest P) dlatego kolor jest niebieski</strong></span>
</p>
</body>
</html>Zwracam uwagę na selektor p * strong, który reprezentuje element strong będący potomkiem dowolnego elementu, i ten dowolny element jest potomkiem p. Ponadto, białe znaki po obu stronach * nie są częścią selektora uniwersalnego; biały znak jest kombinatorem wskazującym, że p musi być przodkiem jakiegoś elementu, a element ten musi być przodkiem strong.