CSS ID Selector (ตัวเลือก ID)

CSS id selector target HTML element ที่มี unique id

Id selector syntax:

#id-name { property-name: value; }

นี่คือ HTML element ที่มี id name เดียวกันเป็น attribute value:

<div id="id-name"></div>

CSS id selector #id-name ผูกกับ <div> element ที่มี id-name attribute หมายความว่า styling properties ที่คุณเพิ่มใน #id-name ใน CSS stylesheet จะถูก apply ให้ <div>

Hash symbol (#) ก่อนชื่อ id เป็น CSS syntax เฉพาะ ตอนเพิ่ม id name ให้ HTML element เป็น id attribute คุณไม่ใช้ # symbol

มาลองใช้สิ่งที่เรียนรู้ใน practical example

นี่คือ HTML <button> element พร้อม default styling ที่สืบทอดมาจาก browser's User Agent Stylesheet:

<button>Button</button>

Default look: (boring)

มาลอง override default button styling โดยสร้าง CSS id ชื่อ #my-button ให้ styling properties:

#my-button {
    font-size: 18px;
    padding: 14px 24px;
    border-radius: 8px;
    border: none;
    background-color: #F7575C;
    color: white;
}

แล้วเพิ่ม id ให้ button element เป็น id attribute:

<button id="my-button">Button</button>

Result: (styled button)

สิ่งสำคัญที่สุดเกี่ยวกับ id selector คือ ไม่เหมือน CSS class selectors ids สามารถ apply ให้ element ได้เพียงหนึ่ง element ต่อหน้า นี่ทำให้ ids less flexible แต่ more predictable

Rule of thumb: ใช้ ids สำหรับ single elements ที่ปรากฏครั้งเดียวต่อหน้า เช่น header, footer, หรือ navigation bar