Bộ chọn nhóm (Group Selector - Comma)

Dùng **dấu phẩy (`,`)** để gom nhiều selector chia sẻ **cùng một khối quy tắc CSS**. Giúp code DRY (Don't Repeat Yourself), dễ bảo trì.

Cú pháp

selector1, selector2, selector3 {
  /* Quy tắc chung cho tất cả */
}

Ví dụ: Style cho div và p cùng lúc

<!DOCTYPE html>
<html>
<head>
  <style>
    div, p {
      color: blue;
      background-color: orange;
    }
  </style>
</head>
<body>
  <h1>Demo Website</h1>
  <h2>Fruits</h2>
  <p>Fruits are good for health.</p>      <!-- Áp dụng -->
  <div>
    <p>This is demo text.</p>           <!-- Cả div và p đều áp dụng -->
  </div>
</body>
</html>

Kết quả

• Thẻ `

  ` đầu: chữ xanh, nền cam.

• Thẻ `
  `: chữ xanh, nền cam.
• Thẻ `

  ` trong div: chữ xanh, nền cam (kế thừa từ div + rule riêng).

• Thẻ `

  `, `

  `: không ảnh hưởng.

Các dạng selector hợp lệ trong group

/* Element */
h1, h2, h3 { color: #333; }

/* Class */
.btn, .button, .link-btn { padding: 10px; }

/* ID (hiếm dùng) */
#header, #footer { background: #f5f5f5; }

/* Attribute */
input[type="text"], input[type="email"], textarea { border: 1px solid #ccc; }

/* Pseudo-class */
a:hover, a:focus, a:active { color: red; }

/* Kết hợp phức tạp */
.header .nav, .footer .nav, .sidebar .menu { display: flex; }

Lưu ý quan trọng

• Không kế thừa: Group selector chỉ gom *selector*, không gom *specificity*. Mỗi selector giữ độ đặc hiệu riêng.
• Invalid selector hủy cả nhóm: Nếu 1 selector sai cú pháp (ví dụ typo pseudo-class), **toàn bộ rule bị bỏ qua**.
• Selector list forgiveness (CSS mới): `:is()`, `:where()` cho phép selector không hợp lệ trong danh sách không làm hỏng cả rule.

Modern: :is() và :where()

/* :is() - specificity = selector cụ thể nhất trong danh sách */
:is(.header, .footer, .sidebar) .nav { color: white; }

/* :where() - specificity = 0 (rất thấp) */
:where(.header, .footer, .sidebar) .nav { color: white; }

/* Cho phép selector invalid không làm hỏng rule */
:is(:valid, :invalid, :user-invalid) { border-color: red; }