ตัวเลือก (Selector) ขององค์ประกอบลูกใน 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;
}

ทีนี้สมมติว่าเราต้องการกำหนดสีแท็ก li ของรายการ ul เป็นสีแดง และแท็ก li ของรายการ ol เป็นสีเขียว

ในกรณีนี้ ตัวเลือก ขององค์ประกอบลูก จะช่วยเราได้ มันช่วยให้สามารถเลือกแท็กตาม parent ของมันได้ โดยจะต้องระบุตัวเลือกของ parent ก่อน แล้วตามด้วยช่องว่างและตัวเลือกลูก (descendant) สำหรับกรณีของเรา ตัวเลือก ul li จะเลือกทั้งหมด แท็ก li จากรายการ ul ส่วนตัวเลือก ol li จะเลือกแท็ก li ทั้งหมด จากรายการ ol มากำหนดสีให้ ตามที่ต้องการ:

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>