Group Selector (Bộ chọn nhóm) trong CSS

Group Selector cho phép áp dụng cùng một style rule cho nhiều selector khác nhau, phân cách bằng dấu phẩy ,.

Cú pháp

selector1, selector2, selector3 {
  property: value;
}

Ví dụ: Group type selector

h1, h2, h3 {
  color: #36C;
  font-weight: normal;
  letter-spacing: .4em;
  margin-bottom: 1em;
  text-transform: lowercase;
}

→ Tất cả h1, h2, h3 có style giống nhau. Thứ tự không quan trọng.

Ví dụ: Group ID selector

#content, #footer, #supplement {
  position: absolute;
  left: 510px;
  width: 200px;
}

Ví dụ: Group mixed selector

.btn, button, input[type="submit"], #main-action {
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

Lưu ý

• Mỗi selector trong group được tính specificity **riêng biệt**.
• Nếu một selector trong group invalid (cú pháp sai), **toàn bộ rule bị bỏ qua** (trước CSS Selectors Level 4). Level 4 có :is(), :where() cho forgiving selector list.
• Group selector giúp giảm lặp code, dễ bảo trì theme chung.