Wybieranie potomków

Selektory zależne

Definiując styl na podstawie kontekstu pozycyjnego elementu, możemy uczynić znaki bardziej zwięzłymi.

W CSS1, selektory stosujące te zasady nazywane są selektorami kontekstowymi (contextual selectors), ponieważ zależą one od kontekstu, aby zastosować lub uniknąć pewnych zasad. W CSS2, są one nazywane selektorami zależnymi, ale niezależnie od nazwy, ich działanie jest takie samo.

Selektory zależne pozwalają określić styl etykiety na podstawie kontekstu dokumentu. Poprzez odpowiednie użycie selektorów zależnych, możemy uczynić kod HTML bardziej zwięzłym.

Na przykład, jeśli chcesz, aby element strong w liście był kursywą, a nie pionowy, możesz zdefiniować selektor zależny w ten sposób:

li strong 
    font-style: italic;
    font-weight: normal;

Proszę zwróć uwagę na kontekst otaczający niebieski kod oznaczony jako <strong>:

<p><strong>Jestem pionowym czcionką, nie kursywą, ponieważ nie jestem w liście, więc ta reguła nie działa na mnie</strong></p>
<ol>
<li><strong>Jestem kursywą. To dlatego, że element strong znajduje się wewnątrz elementu li.</strong></li>
<li>Jestem normalnym czcionką.</li>
</ol>

W powyższym przykładzie, tylko styl strong elementu li jest pionowy, nie ma potrzeby definiować specjalnej klasy lub id dla elementu strong, co czyni kod bardziej zwięzłym.

Spójrzmy na poniższe reguły CSS:

strong {
     color: red;
     
h2 {
     color: red;
     
h2 strong 
     color: blue;

Poniżej znajduje się HTML, na który ma wpływ:

<p>Słowo mocno podkreślone w tym akapicie to<strong>czerwone</strong>.</p>
<h2>This subhead is also red.</h2>
Słowo mocno podkreślone w tym podtytule toniebieski

Związane treści

Jeśli chcesz nauczyć się więcej o wybieraniu potomków, przeczytaj poniższe treści z zaawansowanych kursów CodeW3C.com: