Bộ chọn lớp

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 12 trên 76.

Bộ chọn lớp dùng để chọn các phần tử HTML dựa trên giá trị thuộc tính class của chúng. Bạn có thể dùng bộ chọn này để áp dụng cùng một kiểu cho nhiều phần tử trong tài liệu. Bộ chọn lớp đặc biệt hữu ích khi bạn muốn tạo kiểu giống nhau cho một nhóm phần tử, bất kể tên thẻ của chúng.

Để chọn các phần tử có một lớp (class) cụ thể trong CSS, bạn dùng dấu chấm (.) theo sau là tên lớp. Đây là cú pháp cơ bản để dùng bộ chọn lớp:

.classname {
    property: value;
}

Ví dụ:

.highlight {
    background-color: yellow;
    color: black;
}

Trong ví dụ này, bộ chọn lớp .highlight nhắm đến tất cả phần tử có lớp "highlight". Các khai báo đặt màu nền thành màu vàng và màu chữ thành màu đen cho những phần tử này.

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có nhiều phần tử, bao gồm tiêu đề (<h1>, <h2>), đoạn văn (<p>) và phần tử phân chia (<div>). Chưa có phần tử nào có class: trước tiên, bạn sẽ thêm các thuộc tính class, sau đó tạo kiểu cho các phần tử bằng bộ chọn class. Hãy làm theo các bước sau:

Thêm thuộc tính class với giá trị "blue-text" vào phần tử <h1> và phần tử <p> đầu tiên.
Thêm thuộc tính class với giá trị "large-text" vào phần tử <h2> và phần tử <p> thứ hai.
Viết quy tắc CSS dùng bộ chọn class để chọn tất cả phần tử có class "blue-text". Đặt màu văn bản của các phần tử này thành màu xanh lam.
Viết quy tắc CSS dùng bộ chọn class để chọn tất cả phần tử có class "large-text". Đặt cỡ chữ của các phần tử này thành 24 pixel.

Tự làm thử

<html>
<head>
    <title>Class Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <div>This is a division.</div>
</body>
</html>