Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

ใช้ CSS และ HTML ใส่สไตล์ให้ Element ผู้ปกครองเมื่อมีลูกเฉพาะ

ใน CSS3 ยังไม่มี "Parent Selector" (ตัวเลือกผู้ปกครอง) โดยตรง แต่มีเสนอใน CSS4 โดยใช้เครื่องหมาย $ เช่น ul $li ul.sub { ... } เพื่อเลือก li ที่มี ul.sub อยู่ข้างใน

วิธีทางเลือกที่ใช้งานได้ในปัจจุบันคือใช้ jQuery ด้วยโค้ดบรรทัดเดียว:

$('ul li:has(ul.sub)').addClass('has_sub');

จากนั้นจึงสามารถกำหนดสไตล์ให้ li.has_sub ใน CSS ได้ตามต้องการ

คำอธิบาย: ตัวเลือก :has() ของ jQuery จะเลือก element ทั้งหมดที่มี element ลูกภายในตรงกับ Selector ที่ระบุ ตัวอย่างนี้คือ li ที่มี ul.sub อยู่ข้างใน