CSS හි සංකීර්ණ පැතුරුම්කරු සහ වර්ගයේ සංයෝජන

දැන් අපට පහත කේතය ඇති බව සිතමු:

html<div class="block">
  <h2 class="header">Title h2</h2>
  <p>
    text
  </p>
  
  <h3 class="header">Title h3</h3>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div class="block">
  <h2 class="header">Title h2</h2>
  <p>
    text
  </p>
  
  <h3 class="header">Title h3</h3>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

header පන්තිය ඇති සියලුම අංග, block පන්තිය ඇති අංගයක් තුළ පිහිටා ඇති, සොයාගෙි Arial අකුරු පවුල නියම කරමු:

css.block .header {
  font-family: Arial;
}

HTML කේතයේ දක්නා ලෙි, block පන්තිය ඇති අංගය තුළ header පන්තිය ඇති අංග h2 ශීර්ෂ ලෙස හෝ h3 ශීර්ෂ ලෙස විය හැක. අපි මෙම ශීර්ෂ වෙන්කර හඳුනාගන්නා පැතුරුම්කරු ලියා, මෙම ශීර්ෂ සමඟ යමක් කරමු.

block පන්තිය ඇති අංගයක් තුළ පිහිටා ඇති, header පන්තිය ඇති සියලුම h2 අංග තෝරාගනිමු:

css.block h2.header {
  font-size: 30px;
  color: red;
}

දැන් block පන්තිය ඇති අංගයක් තුළ පිහිටා ඇති, header පන්තිය ඇති සියලුම h3 අංග තෝරාගනිමු:

css.block h3.header {
  font-size: 20px;
  color: green;
}

අපගේ CSS සියල්ල එකට රැස් කරමු:

css.block .header {
  font-family: Arial;
}
.block h2.header {
  font-size: 30px;
  color: red;
}
.block h3.header {
  font-size: 20px;
  color: green;
}

එය අපගේ HTML කේතයට යොදමු:

css.eee .bbb {
  color: red;
}

css.eee h2 {
  color: red;
}

css.eee h2.bbb {
  color: red;
}

css.eee h3.bbb {
  color: red;
}

css.eee p.bbb {
  color: red;
}

css.eee .bbb .kkk {
  color: red;
}