CSS selectors (bộ chọn CSS) là các thành phần cốt lõi trong việc tạo ra các quy tắc CSS, dùng để xác định và chọn các phần tử HTML trên trang web, từ đó áp dụng các thuộc tính CSS để điều khiển cách thức hiển thị và tương tác của chúng. Có bốn loại selector cơ bản trong CSS, mỗi loại phục vụ những mục đích khác nhau trong việc chọn lựa phần tử HTML:

Simple Selector (Bộ chọn đơn): Đây là bộ chọn cơ bản nhất, chỉ áp dụng một điều kiện duy nhất để chọn phần tử HTML. Các ví dụ phổ biến bao gồm:

Type Selector (Bộ chọn loại): Chọn phần tử HTML theo tên thẻ, ví dụ như div, p, h1.

Attribute Selector (Bộ chọn thuộc tính): Chọn phần tử dựa trên sự hiện diện hoặc giá trị của một thuộc tính, ví dụ như [type="text"].

Pseudo-class (Bộ chọn lớp giả): Chọn phần tử trong trạng thái đặc biệt như :hover, :first-child, :nth-child.

Compound Selector (Bộ chọn ghép): Đây là bộ chọn kết hợp nhiều điều kiện, có thể là các bộ chọn đơn khác nhau. Một phần tử sẽ khớp với bộ chọn ghép nếu nó thỏa mãn tất cả các điều kiện của các bộ chọn đơn trong đó. Ví dụ, div.classname, p#id, hoặc a:hover.

Complex Selector (Bộ chọn phức hợp): Đây là sự kết hợp giữa các selector đơn hoặc ghép, phân tách nhau bằng các toán tử kết hợp. Các toán tử này bao gồm:

Descendant Combinator (Kết hợp tổ tiên): Chọn các phần tử nằm trong một phần tử khác, ví dụ div p chọn tất cả các thẻ p bên trong thẻ div.

Child Combinator (Kết hợp con): Chọn các phần tử con trực tiếp của một phần tử khác, ví dụ ul > li.

Adjacent Sibling Combinator (Kết hợp anh em liền kề): Chọn phần tử anh em ngay sau một phần tử cụ thể, ví dụ h2 + p.

General Sibling Combinator (Kết hợp anh em tổng quát): Chọn tất cả các phần tử anh em sau một phần tử, ví dụ h2 ~ p.

Relative Selector (Bộ chọn tương đối): Bộ chọn này tìm kiếm các phần tử dựa trên mối quan hệ tương đối của chúng với các phần tử khác. Mối quan hệ này được xác định qua các toán tử kết hợp như đã đề cập ở trên (descendant, child, sibling). Ví dụ, div > p sẽ chọn tất cả các thẻ p là con trực tiếp của thẻ div.

Như vậy, qua việc hiểu rõ các loại selector này, bạn có thể dễ dàng xây dựng các quy tắc CSS linh hoạt, phù hợp với cấu trúc HTML của mình và kiểm soát chi tiết hơn về cách các phần tử trên trang được hiển thị và tương tác.