ตัวเลือกคลาส CSS

ตัวเลือกคลาส CSS กำหนดเป้าหมายองค์ประกอบ HTML ทั้งหมดที่มีแอตทริบิวต์ชื่อคลาสที่ตรงกันแนบมา

ไวยากรณ์ตัวเลือกคลาส:

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

นี่คือองค์ประกอบ HTML ที่มีชื่อคลาสเดียวกันกับค่าแอตทริบิวต์:

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

ตัวเลือกคลาส CSS .class-name แนบมากับ <div> องค์ประกอบที่มี class-name คุณลักษณะ. นั่นหมายความว่าคุณสมบัติการจัดสไตล์ใดก็ตามที่คุณเพิ่มใน .class-name ในสไตล์ชีต CSS ของคุณจะถูกนำไปใช้กับ div

จุด (. ) ก่อนชื่อของคลาสคือไวยากรณ์ CSS เฉพาะ เมื่อคุณเพิ่มชื่อคลาสให้กับองค์ประกอบ HTML เป็นแอตทริบิวต์คลาส คุณไม่ได้ใช้ . .

ตอนนี้ ลองใช้สิ่งที่เราเพิ่งเรียนรู้ในตัวอย่างที่ใช้งานได้จริง

นี่คือ HTML <button> องค์ประกอบที่มีสไตล์เริ่มต้นที่สืบทอดมาจาก User Agent Stylesheet ของเบราว์เซอร์:

<button>Button</button>

รูปลักษณ์เริ่มต้น:

น่าเบื่อเหรอ?

มาแทนที่รูปแบบปุ่มเริ่มต้นโดยการสร้างคลาส CSS ชื่อ .my-button และให้คุณสมบัติการจัดแต่งทรงผม:

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

และเพิ่มองค์ประกอบปุ่มเป็นแอตทริบิวต์คลาส:

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

ผลลัพธ์:

คุณเพิ่งได้เรียนรู้สิ่งที่สำคัญที่สุดที่คุณจำเป็นต้องรู้เกี่ยวกับการใช้ตัวเลือกคลาส CSS

นานาน่ารู้:

• คลาส CSS สามารถใช้ซ้ำกับองค์ประกอบ HTML ใดก็ได้ ซึ่งแตกต่างจากตัวเลือก ID ซึ่งใช้ได้เพียงครั้งเดียว
• คุณสามารถเพิ่มคลาส CSS ที่แตกต่างกันหลายคลาสให้กับองค์ประกอบเดียวกันได้ <div class="first-class second-class third-class" . วิธีนี้ช่วยให้คุณประกอบการออกแบบองค์ประกอบด้วยคลาสยูทิลิตี้ขนาดเล็กได้อย่างยืดหยุ่น เช่น ที่เห็นในเฟรมเวิร์ก CSS ของ Tailwind