CSS හි දරු තේරීම්කරු

අපට පහත කේතය ඇතැයි සිතමු:

html<p>
  text <b><i>bold italic</i></b>
</p>
<p>
  text <i>just italic</i>
</p>

යම් ඡේදවලට පසුපස්සියන් වන සියලුම i ටැග් තෝරා ගැනීමට අපට අවශ්‍ය යැයි සිතමු. අපි එය කරමු:

cssp i {
  color: red;
}

කේතය ක්‍රියාත්මක කිරීමේ ප්‍රතිඵලය:

දැන් අපි ඡේදවලට කෙලින්ම පසුපස්සි වන i ටැග් තෝරා ගනිමු. මේ සඳහා දරු තේරීම්කරු > අපට උපකාරී වේ.

එය භාවිතා කරන්නේ කෙසේදැයි තේරුම් ගැනීම සඳහා, අපි එය පසුපස්සි තේරීම්කරු සමඟ සංසන්දනය කරමු. මෙය මෙසේය: p i - අපි ඡේද තුළ ඇති සියලුම ඇලකුරු තෝරා ගනිමු, නමුත් මෙය මෙසේය: p > i - ඡේදවලට කෙලින්ම පසුපස්සි වන ඇලකුරු පමණි.

අපි මෙම තේරීම්කරු අපගේ HTML කේතයට යොදමු:

cssp > i {
  color: red;
}

කේතය ක්‍රියාත්මක කිරීමේ ප්‍රතිඵලය:

html<ul>
  <li>
    <i>italic</i>
    <b>bold</b>
    <b><i>bold italic</i></b>
  </li>
  <li>
    <i>italic</i>
    <b>bold</b>
    <b><i>bold italic</i></b>
  </li>
</ul>