การเลือกอิลิเมนต์พี่น้อง (Sibling Elements) ด้วย CSS

เราใช้ adjacent sibling selector (+) หากต้องการจับคู่อิลิเมนต์ที่เกิดขึ้นทันทีหลังจาก selector แรก ทั้งสอง selector เป็นลูกของพาเรนต์เดียวกัน

ไวยากรณ์ Adjacent Sibling Combinator

Selector + Selector { 
  attribute: /*value*/ 
}

หากต้องการเลือกพี่น้องของพาเรนต์เดียวกันโดยไม่คำนึงถึงตำแหน่งของอิลิเมนต์ที่สอง เราใช้ general sibling combinator (~)

ไวยากรณ์ General Sibling Combinator

Selector ~ Selector { 
  attribute: /*value*/ 
}

ตัวอย่างที่ 1: Adjacent Sibling (+)

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#parent { 
  display: flex; 
  margin: 2%; 
  padding: 2%; 
  box-shadow: inset 0 0 24px cyan; 
  justify-content: space-around; 
} 
div + p { 
  font-size: 1.2em; 
  font-weight: bold; 
  background: powderblue; 
} 
section { 
  box-shadow: 0 0 3px rgba(0,0,0,0.8); 
} 
</style> 
</head> 
<body> 
<div id="parent"> 
<img src="https://i.picsum.photos/id/616/200/200.jpg?hmac=QEzyEzU6nVn4d_vdALhsT9UAtTUEVhwrT-kM5ogBqKM" /> 
<div> 
<p>Check this</p> 
<section><p>Some text in section</p></section> 
<span>hello</span> 
</div> 
<p>Selected</p> 
</div> 
</body> 
</html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้:

ตัวอย่างที่ 2: General Sibling (~)

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#parent { 
  display: flex; 
  margin: 2%; 
  padding: 2%; 
  background: thistle; 
  justify-content: space-between; 
} 
section ~ p { 
  text-align: center; 
  font-size: 1.2em; 
  font-weight: bold; 
  background: lavender; 
} 
</style> 
</head> 
<body> 
<div id="parent"> 
<img src="https://i.picsum.photos/id/616/200/200.jpg?hmac=QEzyEzU6nVn4d_vdALhsT9UAtTUEVhwrT-kM5ogBqKM" /> 
<div> 
<p>Random text 1</p> 
<section><p>Some text in section</p></section> 
<span>hello</span> 
<p>Selected</p> 
</div> 
<img src="https://i.picsum.photos/id/1035/200/200.jpg?hmac=IDuYUZQ_7a6h4pQU2k7p2nxTMjMt4uy-p3ze94KtA4" /> 
</div> 
</body> 
</html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้: