การเลือกพี่น้อง CSS

ตัวเลือกพี่น้องเดียวกัน (Adjacent sibling selector) สามารถเลือกส่วนที่มีอยู่หลังจากส่วนอื่นๆ และทั้งสองมีเจ้าหน้าที่เดียวกัน

เลือกพี่น้องเดียวกัน

ถ้าต้องการเลือกส่วนที่มีอยู่หลังจากส่วนอื่นๆ และทั้งสองมีเจ้าหน้าที่เดียวกัน สามารถใช้ตัวเลือกพี่น้องเดียวกัน (Adjacent sibling selector)

ตัวอย่าง，ถ้าต้องการเพิ่มเปิดส่วนที่มีอยู่หลังจากส่วน h1 โดยตรง สามารถเขียนดังนี้:

h1 + p {margin-top:50px;}

ตัวเลือกนี้จะถูกอ่านว่า: “เลือกส่วนที่มีอยู่หลังจากส่วน h1 โดย h1 และส่วน p มีเจ้าหน้าที่เดียวกัน”

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

การอธิบายระบบวิธี

ตัวเลือกพี่น้องเดียวกันใช้เครื่องหมายบวก (+) หรือตัวแทนสมาชิกพี่น้องเดียวกัน (Adjacent sibling combinator)

หมายเหตุ：เหมือนกับตัวแทนสมาชิกทางลูกภาค，สามารถมีอะไหล่ช่องว่างด้านข้างตัวแทนสมาชิกพี่น้องเดียวกันได้

ดูส่วนแบบต้นไม้เอกสารด้านล่างนี้:

<div>
  <ul>
    <li>รายการทางลิสต์ 1</li>
    <li>รายการทางลิสต์ 2</li>
    <li>รายการทางลิสต์ 3</li>
  </ul>
  <ol>
    <li>รายการทางลิสต์ 1</li>
    <li>รายการทางลิสต์ 2</li>
    <li>รายการทางลิสต์ 3</li>
  </ol>
</div>

ในส่วนที่กล่าวข้างต้น div มีสองรายการ รายการละสามรายการเป็นรายการบัญชีรายการบิด และรายการละสามรายการเป็นรายการบัญชีลำดับ รายการเป็นพี่น้องเดียวกัน แต่รายการที่หนึ่งของรายการแรกไม่ได้เป็นพี่น้องเดียวกันกับรายการที่หนึ่งของรายการที่สอง เพราะสองกลุ่มรายการนี้ไม่เป็นเจ้าหน้าที่เดียวกัน (สามารถนับว่าเป็นพี่น้องชายนั้นเท่านั้น)

อย่าลืมว่าสามารถใช้ตัวสัญลักษณ์เพื่อเลือกสมาชิกพี่น้องที่สองแค่เท่านั้น ดูเลือกผู้เกี่ยวข้องด้านล่างนี้

li + li {font-weight:bold;}

เลือกผู้เกี่ยวข้องนี้จะทำให้รายการสองและสามในรายการและรายการที่สามของรายการเปลี่ยนเป็นแบบหนา รายการแรกไม่ได้รับผลกระทบ

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

ต่อเชื่อมกับเลือกผู้เกี่ยวข้องอื่นๆ

ตัวสัญลักษณ์พี่น้องเพื่อต่อเชื่อมกับตัวสัญลักษณ์อื่นๆ

html > body table + ul {margin-top:20px;}

เลือกผู้เกี่ยวข้องนี้ หมายถึงเลือกทุก ul บริเวณที่อยู่หลังจาก table ซึ่งตั้งอยู่ใน body ซึ่งเป็นเจ้าหน้าที่ของ html