css selector ในรูปแบบที่เราใช้กันนอกจาก id และ class แล้วยังมีการใ้ช้ในรูปแบบอื่นๆอีก ในที่นี้จะยกตัวอย่าง ในแบบอื่นๆบ้าง

css selector แบบแรก เพื่ออ้างอิงชื่อ attribute โดยรูปแบบจะเป็นดังนี้ selector[attribute] คือ จะเลือก elements ที่มี attribute ตามที่กำหนดเท่านั้น

h1 [ title ] { color : blue ; ]

ก็คือ เลือกแท็ก h1 ที่มี attribute title เท่านั้น

h1 [ title = ” I Love You ” ] { color : orange ; }

ก็คือ เลือกแท็ก h1 ที่มี attribute tile ที่มีชื่อว่า I Love You เท่านั้น

header > a : hover [ href ] { background : green ; }

ก็คือ เลือกแท็ก a ที่อยู่ภายใต้แท็ก header และมีการกำหนด attribute href เอาใว้ โดยถ้าเอาเมาส์ไป hover (hover คือ เอาเมาส์ไปชี้) ก็จะเปลี่ยนเป็นสีเขียว

div [ class ~= boy ] { padding : 10px ; margin : 10px ; }

ก็คือ เลือกแท็ก div โดยให้ class ขึ้นต้นด้วยอะไรก็ได้แต่ลงท้ายด้วย boy

h1 [ title ~= girl ] { color : red ; }

ก็คือ เลือกแท็ก h1 ที่มี title ที่ลงท้ายด้วย girl

เพียงเท่านี้ก็ได้เทคนิคดีๆ ที่นำไปพัฒนาต่อยอดได้อีกแล้วนะครับ

ยังมีบทความอื่นๆที่น่าสนใจอีกมากมาย เข้าไปอ่านเพิ่มเติมที่เว็บไซต์ หรือกดติดตาม Facebook ที่ link ด้านล่างนี้ได้เลยครับ

อ่านบทความอื่น

ติดตามใน Facebook page