CSS හි උරුම තේරීම් ක්‍රම

අප සතුව ul ලැයිස්තුවක් සහ ol ලැයිස්තුවක් ඇතැයි සිතමු:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>
<ol>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ol>

මෙම ලැයිස්තුවල ඇති li ටැග් රතු පැහැයට පාන්දරමු:

cssli {
  color: red;
}

දැන් අපට අවශ්‍ය යැයි සිතමු ul ලැයිස්තුවේ ඇති li ටැග් රතු පැහැයට පාන්දරන්න, සහ ol ලැයිස්තුවේ ඇති li ටැග් - කොළ පැහැයට.

මෙම අවස්ථාවේදී උරුම තේරීම් ක්‍රම අපට උපකාරී වනු ඇත. එය මාපිල අනුව ටැග් තෝරා ගැනීමට ඉඩ සලසයි. මෙය සඳහා මාපිලගේ තේරීම් ක්‍රමය සඳහන් කළ යුතු අතර, හිස් තැනකින් පසුව - උරුමයාගේ තේරීම් ක්‍රමය. අපගේ අවස්ථාවේ ul li තේරීම් ක්‍රමය ul ලැයිස්තුවෙන් සියලුම li ටැග් තෝරා ගනු ඇත, සහ ol li තේරීම් ක්‍රමය - ol ලැයිස්තුවෙන් සියලුම li ටැග් තෝරා ගනු ඇත. අපි ඒවා අවශ්‍ය පැහැ වලට පාන්දරමු:

cssul li {
  color: red;
}
ol li {
  color: green;
}

උරුම තේරීම් ක්‍රමය අනිවාර්යයෙන්ම ටැග් තේරීම් ක්‍රම දෙකකින් සමන්විත විය යුතු නොවේ - ඒවායේ ගණන ඕනෑම තරමක් විය හැක, හිස් තැනකින් වෙන් කර ලියා ඇත. පහත කේතයේ, උදාහරණයක් ලෙස, සියලුම i ටැග් තෝරා ගනු ලැබේ, li ටැගය තුළ පිහිටා ඇති, ඒවා අනෙක් අතට ul ටැගය තුළ පිහිටා ඇත:

cssul li i {
  color: red;
}

html<ul>
  <li>text <i>italic</i></li>
  <li>text <i>italic</i></li>
  <li>text <i>italic</i></li>
  <li>text <i>italic</i></li>
</ul>

<p>
  paragraph text <i>italic</i>
</p>
<p>
  paragraph text <i>italic</i>
</p>

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