นิยามเลือกเลือนสมาชิก CSS

เมื่อเปรียบเทียบกับ selector ของ descendant หรือ child selector สามารถเลือก element ที่เป็น child element ของ element ที่กำหนดไว้เท่านั้น。

เลือก child element

หากคุณไม่ต้องการเลือก element หลากหลายทางหลังทางเดินทาง แต่ต้องการลดขอบเขตลง และเลือก child element ของ element บางอย่าง ให้ใช้ selector ของ child element (Child selector).

ตัวอย่าง，หากคุณต้องการเลือก element strong ที่เป็น child element ของ element h1 คุณสามารถเขียนได้นี้:

h1 > strong {color:red;}

กฎนี้จะทำให้ element แรกของ h1 มีสีแดงสำหรับสอง element strong แรก แต่ element strong ของ h1 ที่สองไม่ได้รับผลกระทบ:

<h1>นี่คือ <strong>มากมาย</strong> <strong>มากมาย</strong> ที่สำคัญ.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

ลองทดลองด้วยตัวเอง

การอธิบายกรรมศาสตร์

คุณคงได้สังเกตได้แล้วว่าเลือกเลือนสมาชิกใช้เครื่องหมายย่อย (>)

ในขอบเขตของเครื่องหมายย่อย CSS สามารถมีช่องว่างได้ นั่นเป็นทางเลือก

h1 > strong
h1> strong
h1 >strong
h1>strong

ถ้าอ่านมาจากทางขวาไปทางซ้าย เลือกเลือน h1 > strong สามารถอธิบายได้ว่า 'เลือกเลือนทุกตัว strong ที่เป็นลูกของ element h1'

ผสมผสานเลือกเลือนเพื่อนบุตรและเลือกเลือนสมาชิก

โปรดดูเลือกเลือนด้านล่างนี้:

table.company td > p

เลือกเลือนด้านบนจะเลือกเลือนทุกตัว p ที่เป็นลูกของ td ซึ่งตัว td นั้นสืบทอดมาจาก element table ซึ่งมี attribute class ที่มีค่า company