css. selector
CSS Selector is a part of the CSS language used to select (select) HTML elements to assign styling to those elements. Simply put, the selector in CSS is a tool that specifies which HTML elements you want to customize color, size, position, or other properties.
Type of CSS Selectors:
Elements Selector:
Select an element by the tag name (e.g. < h1 >, < p >, < div >).
Class Selector:
Select an element with a given attribute class (e.g. .highlight).
Selector ID:
Select an element with a given attribute id (e.g.# Header).
Attribute Selector:
Select an element with a given attribute and attribute value (e.g. a [target = "_ blank"]).
Universal Selector:
Select all elements in the HTML page (e.g. *).
Descendant Selector:
Select an element that is inside (as an offspring) of another element (such as div p).
Child Selector:
Select an element that is a direct child of another element (e.g. ul > li).
Pseudo-class Selector:
Select elements by state (e.g. a: hover, input: focus).
Pseudo-element Selector:
Select part of the element (e.g.: first-line,:: before).
Example:
h1 {color: blue;}: Make all text in the < h1 > tag blue.
.highlight {background-color: yellow;}: Make elements with class "highlight" have a yellow background.
# MyElement{font-size: 20px;}: Make an element with the id "myElements" have a font size of 20px.
Div p {color: green;}: Makes all text in the < p > tag located in the < div > tag green.
A: hover {color: red;}: Make the link turn red when the mouse is placed on.
ถ้าเพิ่งเริ่มเขียน 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 อ่านง่ายและดูแลต่อได้สบายขึ้นค่ะ
