Wybieracze potomków CSS

Wybieracz potomka (descendant selector) znany również jako wybieracz włączenia.

Selektor potomka może wybrać elementy będące potomkami pewnych elementów.

Wybór elementów na podstawie kontekstu

Możemy zdefiniować reguły selektora potomka, aby działały w niektórych strukturach dokumentu, ale nie w innych.

Przykładem jest, jeśli chcesz zastosować styl tylko do elementów em znajdujących się w elemencie h1, można to napisać tak:

h1 em {color:red;}

Powyższa reguła zmieni tekst elementu em będącego potomkiem elementu h1 na czerwony. Inne teksty em (np. w akapitach lub blokach cytatu) nie będą wybierane przez tę regułę:

<h1>Jest to <em>ważny</em> nagłówek</h1>
<p>Jest to <em>ważny</em> akapit.</p>

Spróbuj sam

Oczywiście, można również umieścić atrybut class na każdym elemencie em znajdującym się w h1, ale oczywiste jest, że selektor potomka jest bardziej efektywny.

Wyjaśnienie gramatyczne

W selektorze potomka, lewa strona reguły zawiera dwa lub więcej selektorów oddzielonych spacjami. Przestrzeń między selektorami jest łącznikiem (combinatorem). Każdy łącznik przestrzenny można interpretować jako '... znajduje się w ...', '... jest częścią ...', '... jest potomkiem ...', ale wymagane jest czytanie selektora od prawej do lewej.

Zatem selektor h1 em można interpretować jako 'każdy element em będący potomkiem elementu h1'. Jeśli czytać selektor od lewej do prawej, można go zmienić na następujące wyrażenie: 'wszystkie h1 zawierające em będą miały zastosowanie do tego stylu'.

Aplikacje praktyczne

Funkcje selektora potomka są niezwykle potężne. Dzięki niemu można uczynić możliwymi zadania, które nie byłyby możliwe w HTML.

Załóżmy, że mamy dokument, który zawiera panel boczny i główną część. Tło panelu bocznego jest niebieskie, a tło głównej części jest białe. Oba obszary zawierają listę linków. Nie można ustawić wszystkich linków na niebieski, ponieważ w przeciwnym razie nie można by zobaczyć niebieskich linków w panelu bocznym.

Rozwiązaniem jest użycie selektora potomka. W tym przypadku, można przypisać klasę 'sidebar' do div zawierającego panel boczny i klasę 'maincontent' do głównego obszaru. Następnie napisać następujące style:

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

Jednym z łatwo pomijanych aspektów wybieraczy potomków jest to, że odstęp między dwoma elementami może być nieskończony.

Na przykład, jeśli zapiszesz ul em, ta składnia wybierze wszystkie elementy em dziedziczone z elementu ul, niezależnie od głębokości wcięcia elementu em.

Dlatego ul em wybierze wszystkie elementy em z następujących znaczników:

<ul>
  <li>Element listy 1</li>
    <ol>
      <li>Element listy 1-1</li>
      <li>Element listy 1-2</li>
      <li>Element listy 1-3</li>
        <ol>
          <li>Element listy 1-3-1</li>
          <li>Element listy</li> <em>1-3-2</em></li>
          <li>Element listy 1-3-3</li>
        </ol>
      </li>
      <li>Element listy 1-4</li>
    </ol>
  </li>
  <li>Element listy 2</li>
  <li>Element listy 3</li>
</ul>

Spróbuj sam