Selektory potomka

W przypadku selektora potomka najlepszym rozwiązaniem jest rozpoczęcie jego omawiania od konkretnego przykładu. Dzięki temu działanie tej konstrukcji powinno być znacznie bardziej zrozumiałe.

Przykładowy styl dla nagłówka stopnia pierwszego wygląda tak jak w poniższym przykładzie:

h1
{
font-size:20pt;
}

Jeżeli chcemy, aby jakiś fragment tego nagłówka był sformatowany według innych zasad, to należy arkusz uzupełnić o następującą konstrukcję:

h1
{
font-size:10pt;
}

Kod strony potrafiący skorzystać z selektora potomka będzie wyglądał następująco:

<h1>Nagłówek stopnia pierwszego</h1>
<h1>Nagłówek stopnia pierwszego <span>w którym zastosowałem selektor potomka</span></h1>

Pierwszy z przykładowych nagłówków stopnia pierwszego ma wysokość równą 20pt. W drugim nagłówku użyto selektora potomka, dzięki czemu połowa tekstu ma wysokość 20pt — czyli tak jak pierwszy nagłówek, natomiast druga część została wyświetlona czcionką o wysokości równej 10pt.

Poniżej zamieszczam jeszcze jeden przykład zastosowania selektora potomka.

Arkusz stylów ma następującą postać:

p
{
font-size:14pt;
}
p span
{
font-style:italic;
font-size:20pt;
}

Przykładowy kod strony wykorzystującej selektor potomka zadeklarowany powyżej może przybrać następującą formę:

<p>Przykładowy kod HTML wykorzystujący <span>selektor potomka</span> zadeklarowany powyżej może przybrać następującą postać.</p>

Również tym razem efekt działania selektora potomka zobaczymy tylko dla tej części akapitu, która dodatkowo jest zamknięta w znacznik <span></span>.