ซีเลคเตอร์แบบเพื่อนบ้านใน CSS

ซีเลคเตอร์แบบเพื่อนบ้าน + ช่วยให้เลือก องค์ประกอบตามเพื่อนบ้านที่อยู่ด้านบนของมัน

ไวยากรณ์

cssซีเลคเตอร์1 + ซีเลคเตอร์2 {
  
}

ตัวอย่าง

มาดูทุกแท็ก p ที่อยู่ตามหลังแท็ก h2 โดยตรง และเปลี่ยนสีเป็นสีแดง:

html<h2>ข้อความ</h2>
<p>
  +
</p>
<p>
  -
</p>
<p>
  -
</p>

cssh2 + p {
  color: red;
}

Результат:

ตัวอย่าง

มาดูทุกแท็ก p ที่อยู่ตามหลังองค์ประกอบ ที่มีคลาส .test โดยตรง และเปลี่ยนสีเป็นสีแดง:

html<p class="test">
  ข้อความ
</p>
<p>
  +
</p>
<p>
  -
</p>

css.test + p {
  color: red;
}

Результат:

ตัวอย่าง

มาดูทุกองค์ประกอบที่มีคลาส .elem ที่อยู่ตามหลัง องค์ประกอบที่มีคลาส .test โดยตรง และ เปลี่ยนสีเป็นสีแดง:

html<p class="test">
  ข้อความ
</p>
<p class="elem">
  +
</p>
<p>
  -
</p>

css.test + .elem {
  color: red;
}

Результат:

ดูเพิ่มเติม