Bộ chọn lớp CSS

Bộ chọn lớp CSS nhắm mục tiêu tất cả các phần tử HTML có thuộc tính tên lớp phù hợp được đính kèm với chúng.

Cú pháp bộ chọn lớp:

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

Đây là một phần tử HTML có cùng tên lớp đó làm giá trị thuộc tính:

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

Bộ chọn lớp CSS .class-name được đính kèm với <div> phần tử có class-name thuộc tính. Điều đó có nghĩa là bất kỳ thuộc tính tạo kiểu nào bạn thêm vào .class-name trong biểu định kiểu CSS của bạn được áp dụng cho div.

Dấu chấm (. ) trước tên của lớp là một cú pháp CSS cụ thể. Khi bạn thêm tên lớp vào một phần tử HTML làm thuộc tính lớp, bạn không sử dụng . .

Bây giờ, hãy sử dụng những gì chúng ta vừa học được trong một ví dụ thực tế.

Đây là một HTML <button> phần tử có một số kiểu mặc định được kế thừa từ Biểu định kiểu tác nhân người dùng của trình duyệt:

<button>Button</button>

Giao diện mặc định:

Chán hả?

Hãy ghi đè kiểu nút mặc định bằng cách tạo một lớp CSS có tên là .my-button và cung cấp cho nó một số thuộc tính tạo kiểu:

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

Và thêm vào phần tử nút làm thuộc tính lớp:

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

Kết quả:

Bạn vừa học được những điều quan trọng nhất bạn cần biết về cách sử dụng bộ chọn lớp CSS.

Điều cần biết:

• Các lớp CSS có thể được sử dụng lại trên bất kỳ phần tử HTML nào, không giống như bộ chọn ID, chỉ có thể được sử dụng một lần.
• Bạn có thể thêm nhiều lớp CSS khác nhau vào cùng một phần tử <div class="first-class second-class third-class" . Điều này mang đến cho bạn một cách linh hoạt để tập hợp các thiết kế phần tử của mình với các lớp tiện ích nhỏ, chẳng hạn như được thấy với khung CSS Tailwind.