Adjacent Sibling Selectors ใน CSS (ตัวเลือกพี่น้องติดกัน)

CSS Adjacent Sibling Selector (+) ใช้เลือกองค์ประกอบที่เป็นพี่น้อง ติดกัน (adjacent) ขององค์ประกอบแรก เลือกได้เฉพาะองค์ประกอบที่อยู่ ทันทีหลัง ตัวเลือกแรก

ไวยากรณ์ (Syntax)

element + element {
  /* declarations */
}

ตัวอย่างที่ 1: div ติดกัน

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      margin: 8px; height: 50px; width: 60px;
      display: flex; float: left; border-radius: 5%;
      border: 2px solid brown; box-shadow: inset 0 2px 12px olivedrab;
    }
    div + div {          /* div ที่อยู่ทันทีหลัง div อื่น */
      border-radius: 50%; background-color: orchid;
    }
  </style>
</head>
<body>
  <div></div>
  <hr>
  <div></div>
  <div></div>
</body>
</html>

ผลลัพธ์

div แรก: รูปสี่เหลี่ยม | div ที่ 2 (หลัง hr): วงกลมสีม่วง | div ที่ 3 (ติด div ที่ 2): วงกลมสีม่วง

ตัวอย่างที่ 2: span ติดกันใน p

<!DOCTYPE html>
<html>
<head>
  <style>
    p { font-size: 1.5em; }
    span { background-color: lavender; }
    span + span { background-color: darkseagreen; }
  </style>
</head>
<body>
  <p>
    <span>Demo text</span>  
    <span>goes here</span>
  </p>
</body>
</html>

ผลลัพธ์

ความแตกต่าง Sibling Selectors

กรณีใช้งานทั่วไป

• จัดสไตล์ input + label สำหรับ custom checkbox/radio
• เพิ่ม margin ระหว่างองค์ประกอบที่ติดกัน: h2 + p { margin-top: 0; }
• จัดสไตล์ first item ต่างจากที่เหลือ: li + li { border-top: 1px solid #ccc; }