Selector (Bộ chọn) trong CSS là gì và cách sử dụng

Selector (Bộ chọn) là phần của CSS rule xác định **element HTML nào** sẽ được áp dụng style. Selector trỏ đến element, declaration block chứa các property-value.

Cấu trúc CSS Rule

selector {
  property: value;
  property: value;
}

Ví dụ Type Selector

h1 {
  color: #36CFFF;
}

Các loại Selector chính

Loại	Cú pháp	Ví dụ	Mô tả
Type	`tagname`	`h1`, `p`	Chọn theo tên thẻ
Class	`.classname`	`.btn`, `.card`	Chọn theo attribute class
ID	`#idname`	`#header`, `#main`	Chọn theo attribute id (duy nhất)
Universal	`*`	`*`	Chọn tất cả element
Attribute	`[attr]`, `[attr="val"]`	`[type="text"]`	Chọn theo attribute
Pseudo-class	`:state`	`:hover`, `:first-child`	Trạng thái đặc biệt
Pseudo-element	`::element`	`::before`, `::first-line`	Phần ảo của element
Combinator	, `>`, `+`, `~`	`div p`, `ul > li`	Mối quan hệ giữa element

Độ đặc hiệu (Specificity)

Inline style (1000) > ID (100) > Class/Attribute/Pseudo-class (10) > Type/Pseudo-element (1) > Universal (0).

Selector càng cụ thể → độ đặc hiệu cao hơn → ghi đè style selector chung hơn.