ซีเล็คเตอร์ลูกใน CSS

สมมติว่าเรามีโค้ดต่อไปนี้:

html<p>
  ข้อความ <b><i>ตัวหนา ตัวเอียง</i></b>
</p>
<p>
  ข้อความ <i>แค่ตัวเอียง</i>
</p>

สมมติว่าเราต้องการเลือกแท็ก i ทั้งหมด ที่เป็นลูกหลานของย่อหน้า มาทำกัน:

cssp i {
  color: red;
}

ผลลัพธ์จากการรันโค้ด:

คราวนี้มาเลือกแท็ก i ที่เป็นลูกโดยตรงของย่อหน้าของเรากัน ซีเล็คเตอร์ลูก > จะช่วยเราในเรื่องนี้

เพื่อให้เข้าใจวิธีการใช้ มาลองเปรียบเทียบ กับซีเล็คเตอร์ลูกหลานกัน แบบนี้: p i - เราจะเลือกตัวเอียงทั้งหมดภายใน ย่อหน้า แต่แบบนี้: p > i - จะเลือกแค่ ตัวเอียงที่เป็นลูกโดยตรงของย่อหน้าเท่านั้น

ลองใช้ซีเล็คเตอร์นี้กับโค้ด HTML ของเราดู:

cssp > i {
  color: red;
}

ผลลัพธ์จากการรันโค้ด:

html<ul>
  <li>
    <i>ตัวเอียง</i>
    <b>ตัวหนา</b>
    <b><i>ตัวหนา ตัวเอียง</i></b>
  </li>
  <li>
    <i>ตัวเอียง</i>
    <b>ตัวหนา</b>
    <b><i>ตัวหนา ตัวเอียง</i></b>
  </li>
</ul>