:has() CSS คืออะไร? ใช้ยังไง?

สวัสดีครับทุกโคนนน เนื่องจากผมพึ่งได้รู้จัก คำสั่งใหม่ในการเขียน CSS ที่ชื่อว่า “:has()” ก็เลยอยากเอาสิ่งที่รู้มากองไว้ใน blog นี้ดีกว่าเผื่อเป็นประโยชน์ให้กับเหล่าชาวที่กำลังทำ Front-End ทั้งมือเก่าและมือใหม่ที่ยังไม่เลยได้ยินเกี่ยวกับเจ้าสิ่งนี้… เพราะมันมีประโยชน์อยู่เยอะเลยทีเดียว

เรามาเริ่มก็เลยดีกว่า…

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

เช่นถ้าอยากเลือกทุก div ที่มีข้อความ p อยู่ด้านใน ก็สามารถเขียนแบบนี้ได้เลย

โคตรง่ายใช่ไหมล๊า แค่นี้ก็รวบหมดทุก div ที่มี p tag เป็นลูกไม่ว่าจะอยู่ระดับไหนก็ตาม มันจะทำให้การเขียน CSS ไม่ต้องซับซ้อนเหมือนแต่ก่อน

หรือถ้าอยากเลือกทุก section ที่ไม่มี h2 อยู่ด้านในล่ะก็ ก็สามารถกำหนดได้ง่ายๆแบบนี้เลย

เห็นไหมว่ามันสามารถใส่เงื่อนไขต่างๆ ลงไปได้เยอะแยะ ทั้งการเลือกจากชนิดของ element class หรือแม้แต่ตำแหน่งที่อยู่ของมัน

จริงๆ แล้วคำสั่งนี้ก็ไม่ได้ใหม่มากเท่าไหร่ แต่ก่อนหน้านี้มันก็ทำได้นะ แต่ต้องเขียนซ้อนกันเยอะมาก ทำให้โค้ดดูเละเทะ ยากต่อการอ่านและแก้ไข พอมีคำสั่งนี้ออกมาก็ทำให้การเขียนกระชับและเข้าใจง่ายขึ้นเยอะเลยล่ะ

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

โดยรวมแล้ว “:has()” มันเป็นเครื่องมือที่ดีมากสำหรับการเขียน CSS ที่ต้องเลือก element ที่ซับซ้อนหรือมีเงื่อนไขมาก มันช่วยให้โค้ดดูสะอาด อ่านเข้าใจง่าย และควบคุมได้ตรงตามต้องการนั้นเอง…

มาถึงตรงนี้แล้วงั้นเราลองมาดูตัวอย่างที่ซับซ้อนง่ายๆ และใกล้เคียงกับการใช้งานจริงมากขึ้นกันดีกว่า

โดย ผมจะสร้าง style สำหรับเมนู โดยจะเน้นไปที่รายการเมนูที่มีรายการย่อยอยู่ภายใน

ในตัวอย่างนี้ ผมได้ใช้ “:has(> ul)” เพื่อเลือกรายการเมนูที่มีรายการย่อยภายใน จากนั้นกำหนด style ให้กับลิงก์ของรายการเหล่านั้น เช่น พื้นหลัง, border-radius เพื่อออกแบบรูปลักษณ์ของเมนู

เมื่อเมาส์ไปวางที่รายการเมนูที่มีรายการย่อย จะใช้ “:hover” ควบคู่กับ “:has(> ul)” เพื่อเปลี่ยน style และสั่งให้แสดงรายการย่อยออกมา ด้วยการกำหนด display: block ให้กับ ul ที่เป็นรายการย่อย

นอกจากนี้ ยังมีการกำหนด style พื้นฐานอื่นๆ ให้กับรายการย่อย เช่น การจัดตำแหน่งด้วย absolute, กล่องเงา เป็นต้น

จากตัวอย่างนี้ คุณก็จะเห็นได้ว่า “:has()” สามารถนำมาใช้งานได้จริงในการออกแบบองค์ประกอบของเว็บไซต์ที่ซับซ้อน เช่น เมนูนำทางที่มีรายการย่อย ทำให้การเขียนโค้ดและกำหนด style มีความกระชับ และเข้าใจรูปแบบการทำงานได้ง่ายขึ้นเลยทีเดียว

สุดท้ายแล้วหวังว่า blog นี้จะเป็นประโยชน์ไม่มากก็น้อยให้กับคนที่เข้ามาอ่านนะครับ ขอบคุณค้าบบบ 😎