Khái niệm CSS Selector
Bộ chọn (Selector) trong CSS là mẫu (pattern) dùng để chọn phần tử HTML cần áp dụng kiểu dáng.
Các bộ chọn cơ bản quan trọng
| Bộ chọn | Ví dụ | Mô tả |
|---|---|---|
.class | .demo | Chọn tất cả phần tử có class="demo" |
#id | #myid | Chọn phần tử có id="myid" (duy nhất) |
* | * | Chọn **tất cả** phần tử (Universal selector) |
element | p | Chọn tất cả phần tử <p> |
element, element | div, p | Chọn tất cả div VÀ tất cả p (Grouping) |
element element | div p | Chọn p là **con cháu** của div (Descendant) |
element > element | div > p | Chọn p là **con trực tiếp** của div (Child) |
element + element | div + p | Chọn p là **anh chị em liền kề** sau div (Adjacent sibling) |
element ~ element | div ~ p | Chọn p là **anh chị em chung cha** sau div (General sibling) |
[attribute] | [target] | Chọn phần tử có thuộc tính target |
[attribute=value] | [target=_blank] | Chọn phần tử có target="_blank" |
:pseudo-class | :hover | Chọn phần tử ở trạng thái đặc biệt |
::pseudo-element | ::before | Chọn phần tử ảo (phần của phần tử) |
Hiểu rõ bộ chọn là chìa khóa để viết CSS hiệu quả, dễ bảo trì.