:has() คลาสเทียมเชิงความสัมพันธ์

คลาสเทียม :has() ใช้เลือกองค์ประกอบเมื่อองค์ประกอบนั้นมีองค์ประกอบลูกหลานที่ตรงกับอาร์กิวเมนต์ มักเรียกกันว่า "ตัวเลือกแม่" เพราะช่วยให้จัดสไตล์องค์ประกอบแม่ตามองค์ประกอบลูกได้ ซึ่งเป็นความสามารถที่ CSS ไม่เคยมีมาก่อน

.card:has(img) เลือกองค์ประกอบ .card ใด ๆ ที่มีองค์ประกอบลูกหลาน img อาร์กิวเมนต์คือรายการตัวเลือกสัมพัทธ์ ซึ่งเป็นตัวเลือก CSS ที่ถูกต้องใด ๆ ที่อธิบายองค์ประกอบโดยสัมพันธ์กับองค์ประกอบเป้าหมาย

จัดสไตล์พื้นที่บรรจุฟอร์มเมื่อมีช่องป้อนข้อมูลที่ไม่ถูกต้อง: form:has(:invalid) { border-color: red; } จัดสไตล์ส่วนที่มีหัวเรื่อง: section:has(h2) { padding-top: 2rem; } องค์ประกอบแม่จะเปลี่ยนรูปลักษณ์ตามสถานะขององค์ประกอบลูก

:has() สามารถเลือกองค์ประกอบพี่น้องก่อนหน้าได้ ซึ่งเป็นสิ่งที่ + และ ~ ทำไม่ได้ h2:has(+ p) เลือกองค์ประกอบ h2 ที่มี p อยู่ถัดไปทันที li:has(~ .active) เลือกองค์ประกอบ li ที่มีองค์ประกอบพี่น้อง .active อยู่ถัดไป

ตอบสนองต่อความถูกต้องของฟอร์มในตัวโดยไม่ใช้ JavaScript: input:has(~ .error-msg) จัดสไตล์ช่องป้อนข้อมูลที่มีข้อความแสดงข้อผิดพลาดเป็นองค์ประกอบพี่น้อง label:has(+ input:required) จัดสไตล์ป้ายข้อความที่จับคู่กับช่องป้อนข้อมูลซึ่งจำเป็นต้องกรอก ทั้งหมดนี้ทำได้ด้วย CSS เพียงอย่างเดียว

เน้นพื้นที่บรรจุการนำทางตามองค์ประกอบลูกที่กำลังทำงาน: nav:has(.active) ใช้สไตล์กับพื้นที่นำทางทั้งหมดเมื่อองค์ประกอบลูกใด ๆ มีคลาส active เหมาะสำหรับแสดงว่าส่วนใดของการนำทางเป็นส่วนปัจจุบันในระดับพื้นที่บรรจุ

.grid:has(.card:focus-within) จัดสไตล์ตารางกริดทั้งหมดเมื่อการ์ดใด ๆ ได้รับโฟกัสจากแป้นพิมพ์ .dropdown:has(:hover) ทำให้เมนูแบบเลื่อนลงเปิดอยู่ขณะวางตัวชี้เหนือองค์ประกอบลูกหลานใด ๆ ซึ่งสะอาดกว่าการต่อชุดตัวเชื่อมองค์ประกอบพี่น้องที่ซับซ้อน

.sidebar:has(nav) ใช้รูปแบบการจัดวางที่แตกต่างจาก .sidebar:not(:has(nav)) การจัดวางแบบมีเงื่อนไขโดยไม่ใช้ JavaScript: การมีอยู่หรือไม่มีอยู่ขององค์ประกอบลูกที่กำหนดจะเป็นตัวขับเคลื่อนการจัดวางขององค์ประกอบแม่ ทำให้ CSS ปรับตัวตามเนื้อหาและบริบทได้อย่างแท้จริง

:has() ที่ใช้อาร์กิวเมนต์ตัวเลือกแบบกว้าง (เช่น :has(*)) อาจใช้ทรัพยากรมาก เนื่องจากเบราว์เซอร์ต้องตรวจสอบทุกองค์ประกอบ ควรกำหนดอาร์กิวเมนต์ของ :has() ให้เฉพาะเจาะจง ใช้ :has(> .specific-child) (องค์ประกอบลูกโดยตรง) แทน :has(.specific-child) (องค์ประกอบลูกหลานใด ๆ) เมื่อทำได้

:has() รองรับใน Chrome 105+, Safari 15.4+ และ Firefox 121+ และรองรับอย่างสมบูรณ์ตามมาตรฐานพื้นฐานตั้งแต่ช่วงปลายปี 2023 ไม่มีชุดเติมความเข้ากันได้สำหรับคุณสมบัตินี้ (เนื่องจากต้องใช้ JavaScript เพื่อจำลองการทำงาน) จึงควรใช้การเพิ่มความสามารถแบบค่อยเป็นค่อยไปสำหรับเบราว์เซอร์รุ่นเก่าที่คุณสมบัตินี้ไม่ใช่ส่วนสำคัญ

รูปแบบที่ก่อนหน้านี้ต้องใช้ตัวรับฟังเหตุการณ์ของ JS ได้แก่ "เพิ่มคลาสให้แม่เมื่อลูกได้รับโฟกัส" "แสดงภาพซ้อนทับเมื่อมีตัวเรียกโมดัล" และ "จัดสไตล์ตารางกริดแตกต่างออกไปเมื่อมีรายการสามรายการพอดี" :has() จัดการรูปแบบทั้งหมดนี้ได้แบบประกาศ

อะไรทำให้ :has() มีความพิเศษเมื่อเทียบกับตัวเชื่อม CSS ที่มีอยู่เดิมอย่าง + และ ~

:has() เป็นคลาสเทียมเชิงความสัมพันธ์ที่แท้จริงตัวแรกของ CSS ซึ่งช่วยให้เลือกองค์ประกอบแม่และองค์ประกอบพี่น้องก่อนหน้าได้ คุณสมบัตินี้รองรับการจัดสไตล์ตามเนื้อหา การตอบสนองต่อสถานะฟอร์ม การเน้นการนำทาง และรูปแบบอีกมากมายที่ก่อนหน้านี้ต้องใช้การจัดการ DOM ด้วย JavaScript ทั้งหมดนี้ทำได้แบบประกาศใน CSS