css. seletor
CSS Selector คือส่วนหนึ่งของภาษา CSS ที่ใช้ในการเลือก (select) HTML elements เพื่อนำไปกำหนดรูปแบบ (styling) ให้กับองค์ประกอบเหล่านั้น. พูดง่ายๆ ก็คือ ตัวเลือก (selector) ใน CSS เป็นเหมือนเครื่องมือที่ใช้ระบุว่า element HTML ชิ้นไหนที่คุณต้องการปรับแต่งสี, ขนาด, ตำแหน่ง, หรือคุณสมบัติอื่นๆ.
ประเภทของ CSS Selectors:
Element Selector:
เลือก element ตามชื่อ tag (เช่น <h1>, <p>, <div>).
Class Selector:
เลือก element ที่มี attribute class ที่กำหนด (เช่น .highlight).
ID Selector:
เลือก element ที่มี attribute id ที่กำหนด (เช่น #header ).
Attribute Selector:
เลือก element ที่มี attribute และค่า attribute ที่กำหนด (เช่น a[target="_blank"]).
Universal Selector:
เลือกทุก element ในหน้า HTML (เช่น *).
Descendant Selector:
เลือก element ที่อยู่ภายใน (เป็นลูกหลาน) ของ element อื่น (เช่น div p).
Child Selector:
เลือก element ที่เป็นลูกโดยตรงของ element อื่น (เช่น ul > li).
Pseudo-class Selector:
เลือก element ตามสถานะ (เช่น a:hover, input:focus).
Pseudo-element Selector:
เลือกส่วนหนึ่งของ element (เช่น ::first-line, ::before).
ตัวอย่าง:
h1 { color: blue; } : ทำให้ข้อความทั้งหมดใน tag <h1> เป็นสีน้ำเงิน.
.highlight { background-color: yellow; } : ทำให้ element ที่มี class "highlight" มีพื้นหลังสีเหลือง.
#myElement { font-size: 20px; } : ทำให้ element ที่มี id "myElement" มีขนาดตัวอักษร 20px.
div p { color: green; } : ทำให้ข้อความทั้งหมดใน tag <p> ที่อยู่ใน tag <div> เป็นสีเขียว.
a:hover { color: red; } : ทำให้ link เปลี่ยนเป็นสีแดงเมื่อเมาส์วางอยู่บน.
ถ้าเพิ่งเริ่มเขียน CSS แล้วงงว่า “ต้องพิมพ์อะไรเพื่อเลือก element ที่อยากแต่ง” คำตอบก็คือ CSS selector นี่แหละค่ะ เราใช้ selector เพื่อชี้ไปยัง HTML element เป้าหมาย แล้วค่อยใส่ declaration block ตามหลัง เช่น h1 { color: blue; font-size: 12px; } โดยในบล็อกนี้จะมี property และ value คั่นด้วยเครื่องหมาย ; (เซมิโคลอน) ซึ่งเป็นโครงสร้างพื้นฐานที่ควรรู้ก่อน ทริคที่ช่วยให้เลือกได้แม่นขึ้น (และเจอบ่อยเวลาอ่านโค้ดคนอื่น) 1) Element selector (เช่น p, h1, div) เหมาะกับการตั้ง “สไตล์พื้นฐาน” ของทั้งหน้า แต่ระวังโดนกว้างเกินไป เช่น ตั้ง p { line-height: 1.8; } จะกระทบทุกย่อหน้า 2) Class selector (เช่น .highlight) ใช้บ่อยสุดในงานจริง เพราะนำกลับมาใช้ซ้ำได้หลายจุด แนะนำตั้งชื่อสื่อความหมาย เช่น .btn, .card, .text-muted จะดูแลต่อได้ง่าย 3) ID selector (เช่น #header, #myElement) เลือกได้เฉพาะจุดและมีความเฉพาะเจาะจงสูง (specificity สูง) ส่วนตัวจะใช้เฉพาะกรณีจำเป็นจริงๆ เช่น จุด anchor หรือส่วนที่มีแค่ชิ้นเดียว ไม่งั้นตอน override สไตล์จะปวดหัว 4) Descendant vs Child ต่างกันตรง “ระดับความลึก” - div p = เลือก p ทุกตัวที่อยู่ภายใน div ไม่ว่าจะลึกแค่ไหน - div > p = เลือกเฉพาะ p ที่เป็นลูกโดยตรงของ div ตอนเราแก้บั๊กเรื่องสไตล์หลุด/โดนทับ ข้อนี้ช่วยแยกเป้าหมายได้ดีมาก 5) Attribute selector ใช้สะดวกเวลาอยากจับลิงก์หรือ input บางแบบ เช่น a[target="_blank"] { … } หรือ input[type="email"] { … } โดยไม่ต้องเพิ่ม class ใหม่ให้ HTML 6) Pseudo-class ที่ใช้บ่อย: :hover, :focus, :active แนะนำใส่ :focus กับฟอร์ม/ปุ่มเสมอเพื่อการใช้งานด้วยคีย์บอร์ด เช่น input:focus { outline: 2px solid #4f46e5; } 7) Pseudo-element ที่ใช้บ่อย: ::before, ::after, ::first-line สายแต่ง UI จะชอบ ::before/::after เพราะทำ “ของตกแต่ง” ได้โดยไม่เพิ่มแท็กใน HTML เช่นทำเส้นใต้หัวข้อหรือไอคอนเล็กๆ เช็กลิสต์สั้นๆ ก่อนเลือก selector - อยากใช้ซ้ำหลายจุด → ใช้ class - อยากตั้งสไตล์พื้นฐานทั้งหน้า → ใช้ element - อยากจำกัดขอบเขตในกล่องหนึ่ง → ใช้ .container p หรือ .container > p - อยากจับตาม type/attribute → ใช้ attribute selector - อยากทำสถานะตอนโต้ตอบ → ใช้ pseudo-class - อยากตกแต่งส่วนย่อยโดยไม่เพิ่มแท็ก → ใช้ pseudo-element สุดท้าย ถ้าเริ่มรู้สึกว่า “เขียน selector ยาวมาก” ให้ลองเพิ่ม class ที่จุดสำคัญ หรือจัดโครง HTML ให้เป็นระบบขึ้น จะช่วยให้ CSS อ่านง่ายและดูแลต่อได้สบายขึ้นค่ะ
