ตัวเลือกแบบลูก (Child Selector) ใน CSS

ตัวเลือกแบบลูก (Child Selector) > ช่วยให้สามารถเลือก องค์ประกอบตามการซ้อนกันโดยตรง ภายในกันและกัน

ไวยากรณ์

cssselector1 > selector2 {
  
}

ตัวอย่าง

มาเลือกแท็ก b ทั้งหมด ที่อยู่ภายในแท็ก p โดยตรง และเปลี่ยนสีของพวกมันเป็นสีแดง:

html<p>
  text <b>+</b>
</p>
<p>
  text <i><b>-</b></i>
</p>

cssp > b {
  color: red;
}

Результат:

ตัวอย่าง

มาเลือกแท็ก b ทั้งหมด ที่อยู่ภายในองค์ประกอบ ที่มีคลาส .block โดยตรง และเปลี่ยนสีของพวกมันเป็น สีแดง:

html<p class="block">
  text <b>+</b>
</p>
<p class="block">
  text <i><b>-</b></i>
</p>
<p>
  text <b>-</b>
</p>

css.block > b {
  color: red;
}

Результат:

ตัวอย่าง

มาเลือกองค์ประกอบที่มีคลาส .elem ทั้งหมด ที่อยู่ ภายในองค์ประกอบที่มีคลาส .block โดยตรง และเปลี่ยนสีของพวกมันเป็นสีแดง:

html<p class="block">
  text <span class="elem">+</span>
</p>
<p class="block">
  text <i><span class="elem">-</span></i>
</p>
<p class="block">
  text <span>-</span>
</p>
<p>
  text <span class="elem">-</span>
</p>

css.block > .elem {
  color: red;
}

Результат:

ดูเพิ่มเติม