Bộ chọn nhóm

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

Bộ bộ chọn nhóm dùng để chọn nhiều phần tử HTML và áp dụng cùng một kiểu cho tất cả. Cách này đặc biệt hữu ích khi bạn muốn áp dụng chung một bộ kiểu cho các phần tử khác nhau mà không cần viết quy tắc riêng cho từng phần tử. Nhóm các bộ chọn lại giúp bạn viết code CSS ngắn gọn và hiệu quả hơn.

Để dùng bộ chọn nhóm, bạn liệt kê các bộ chọn muốn nhóm, cách nhau bằng dấu phẩy (,). Đây là cú pháp cơ bản:

selector1, selector2, selector3 {
    property: value;
}

Ví dụ, giả sử bạn muốn áp dụng cùng màu chữ và cỡ chữ cho tất cả phần tử <h1>, <h2> và <p>. Bạn có thể dùng bộ chọn nhóm (group selector) như sau:

h1, h2, p {
    color: blue;
    font-size: 16px;
}

Trong ví dụ này, bộ chọn nhóm áp dụng cho tất cả phần tử <h1>, <h2> và <p>. Các khai báo đặt màu chữ thành xanh dương và cỡ chữ thành 16 pixel cho tất cả các phần tử này.

Bạn có thể nhóm mọi loại bộ chọn, bao gồm bộ chọn kiểu, bộ chọn lớp và bộ chọn ID:

h1, .highlight, #intro {
    background-color: yellow;
}

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 khu (<div>). Nhiệm vụ của bạn là dùng bộ chọn nhóm để tạo kiểu cho các phần tử này. Làm theo các bước dưới đây:

Viết quy tắc CSS dùng bộ chọn nhóm, áp dụng cho tất cả phần tử <h1> và <h2>. Đặt màu chữ của các phần tử này thành đỏ.
Viết quy tắc CSS dùng bộ chọn nhóm, áp dụng cho tất cả phần tử <p> và phần tử <div>. Đặt màu nền của các phần tử này thành xám nhạt và cỡ chữ thành 18 pixel.

Tự làm thử

<html>
<head>
    <title>Group Selectors</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>
    <div>This is a division.</div>
</body>
</html>