CSS Class Selector (ตัวเลือกคลาส)

CSS class selector target ทุก HTML elements ที่มี matching class name attribute attached

Class selector syntax:

.class-name { property-name: value; }

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

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

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

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

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

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

<button>Button</button>

Default look: (boring)

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

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

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

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

Result: (styled button)

คุณเพิ่งเรียนรู้สิ่งสำคัญที่สุดเกี่ยวกับการใช้ CSS class selector

Good to know:

• CSS classes สามารถ reuse บน HTML element ใดๆ ได้ ไม่เหมือน ID selectors ที่ใช้ได้ครั้งเดียว
• คุณสามารถเพิ่ม multiple different CSS classes ให้ element เดียวกันได้ <div class="first-class second-class third-class"> นี่ให้ flexible way เพื่อประกอบ element designs ด้วย utility classes เล็กๆ เช่นใน Tailwind CSS framework