Descendant Selector ng CSS

Anak na selector (descendant selector) ay kilala din bilang selector na kasali.

Ang descendant selector ay maaaring piliin ang mga elemento na siyang descendant ng isang elemento.

Piliin ang mga Elemento sa Bawat Konteksto

Maaari naming tukuyin ang descendant selector upang gumawa ng mga patakaran na gagamitin sa ilang straktura ng dokumento, ngunit hindi sa ibang straktura.

Bilang halimbawa, kung nais mong ilapat ang estilo sa em na siyang nasa loob ng h1 lamang, maaaring isulat ito tulad na:

h1 em {color:red;}

Ang patakaran na ito ay gagawin na magpalit ng teksto ng em na siyang descendant ng h1 sa pula. Ang ibang teksto ng em (tulad ng sa talata o block quote) ay hindi ma-selektahan ng patakaran na ito:

<h1>Ito ay isang <em>mahalaga</em> na pamagat</h1>
<p>Ito ay isang <em>mahalaga</em> na talata.</p>

Subukan Nang Higit Pa

Siyempre, maaari mo ring ilagay ang class attribute sa bawat em na matatagpuan sa h1, ngunit malinaw na ang kahusayan ng descendant selector ay mas mataas.

Paliwanag ng Grammar

Sa descendant selector, ang kaliwa ng patakaran ng selector ay kasama ng dalawa o higit pang selector na nagsasagupa ng mga espasyo. Ang espasyo sa pagitan ng selector ay isang kumplikador. Ang bawat kumplikador ng espasyo ay maaaring isalin bilang '... sa ... natagpuan', '... bilang bahagi ng...', '... bilang descendant ng...', ngunit kinakailangang basahin mula sa kanan papunta sa kaliwa ang selector.

Ang h1 em selector ay maaaring isalin bilang 'Anumang em na siyang descendant ng h1'. Kung nais mong basahin ang selector mula sa kaliwa papunta sa kanan, maaaring gamitin ang sumusunod na pahayag: 'Ang lahat ng h1 na naglalaman ng em ay ilalapat ang estilong ito sa em na ito'.

Tinukoy na Gamit

Ang kalakhan ng descendant selector ay napakalakas. Sa pamamagitan nito, maaaring maging posibleng ang mga ginagawa sa HTML na hindi makakamit.

May isang dokumento na may sidebar at isang pangunahing lugar. Ang background ng sidebar ay asul, ang background ng pangunahing lugar ay puti, at parehong lugar ay naglalaman ng listahan ng link. Hindi dapat ilagay ang lahat ng link na asul dahil sa ganitong dahilan, ang asul na link sa sidebar ay hindi makikita.

Ang solusyon ay gumamit ng descendant selector. Sa ganitong sitwasyon, maaaring itakda ang class attribute na sidebar sa div na naglalagay ng sidebar, at itakda ang class attribute ng pangunahing lugar na maincontent. Pagkatapos, isulat ang sumusunod na estilo:

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

May isang bagay na madaling pababayaan sa Descendant Selector, na ang antas ng kahihinatnan sa pagitan ng dalawang element ay maaaring walang hanggan.

Halimbawa, kung sinulat na ul em, ang syntax na ito ay magpili ng lahat ng em element na minaangkin ng ul element, kahit gaano kalalim ang napakalalim na napakalalim.

Kaya, ang ul em ay magpili ng lahat ng em element na nasa mga marka na ito:

<ul>
  <li>Item ng List 1</li>
    <ol>
      <li>Item ng List 1-1</li>
      <li>Item ng List 1-2</li>
      <li>Item ng List 1-3</li>
        <ol>
          <li>Item ng List 1-3-1</li>
          <li>Item ng List</li> <em>1-3-2</em></li>
          <li>Item ng List 1-3-3</li>
        </ol>
      </li>
      <li>Item ng List 1-4</li>
    </ol>
  </li>
  <li>Item ng List 2</li>
  <li>Item ng List 3</li>
</ul>

Subukan Nang Higit Pa