Deribatibong Pilihin ng CSS

Derived selector

Sa pamamagitan ng pagdefinir ng estilo base sa konteksto ng posisyon ng elemento, maaari mong gawing mas maayos at mas simple ang tag.

Sa CSS1, ang selector na ginagamit sa pag-aplay ng alituntunin sa ganitong paraan ay tinatawag na contextual selectors, dahil sila ay umaasa sa konteksto upang ilapat o iwasan ang alituntunin. Sa CSS2, sila ay tinatawag na derived selectors, ngunit kahit paano ka tinatawag nila, ang kanilang ginagawa ay magkapareho.

Ang derived selector ay nagbibigay-daan sa iyo na magpili ng estilo ng isang tag base sa konteksto ng dokumento. Sa pamamagitan ng makatuwirang paggamit ng derived selector, maaari naming gawing mas magandang at mas maayos ang kodigo ng HTML.

Kung gusto mong gawing kagipitan ang strong na elemento sa listahan, hindi ng karaniwang malakas na font, maaari mong gumamit ng isang derived selector sa ganito:

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

Maaaring pansinin ang konteksto ng asul na kodigo na may markasyon na <strong>:

<p><strong>Ako ay malakas na font, hindi kagipitan, dahil hindi ako nasa listahan, kaya hindi gumagamit ang alituntunin na ito para sa akin</strong></p>
<ol>
<li><strong>Ako ay may kagipitan. Ito ay dahil ang strong na elemento ay nasa loob ng li na elemento.</strong></li>
<li>Ako ay normal na font.</li>
</ol>

Sa pagkakataong ito, ang estilo ng itala ng strong na nasa li na elemento lamang ay may kagipitan, hindi kailangan ng partikular na class o id para sa strong na elemento, ang kodigo ay mas simpleng.

Ngayon tingnan ang mga sumusunod na alituntunin ng CSS:

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

Nasa ibaba ang HTML na apektado nito:

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>Ang matinding pinaliwanag na salitang ito sa subhead ay<strong>blue</strong>.</h2>

Kaugnay na nilalaman

Kung ikaw ay nais makapag-aral ng mas malalim na kaalaman tungkol sa deribatibong pilihin, mangyaring basahin ang sumusunod na nilalaman ng mga mataas na tutorial ng CodeW3C.com: