Bạn biết những loại CSS selector nào?

Trong CSS, các selector (bộ chọn) là các mẫu được sử dụng để chọn các phần tử bạn muốn áp dụng kiểu dáng. Dưới đây là một số loại selector phổ biến:

Simple Selectors (Bộ chọn đơn giản)

• Universal Selector (*): Chọn tất cả các phần tử.
• Type Selector (element): Chọn tất cả các phần tử của một loại nhất định, ví dụ p.
• Class Selector (.class): Chọn tất cả các phần tử có class nhất định, ví dụ .intro.
• ID Selector (#id): Chọn một phần tử có ID nhất định, ví dụ #firstname.
• Attribute Selector ([attribute=value]): Chọn các phần tử dựa trên thuộc tính và giá trị của nó, ví dụ [target="_blank"].

Combinator Selectors (Bộ chọn kết hợp)

• Descendant Selector (element element): Chọn tất cả các phần tử con của một phần tử nhất định, ví dụ div p.
• Child Selector (element>element): Chọn tất cả các phần tử con trực tiếp của một phần tử nhất định, ví dụ div > p.
• Adjacent Sibling Selector (element+element): Chọn phần tử ngay sau một phần tử nhất định, cùng cấp với nó, ví dụ div + p.
• General Sibling Selector (element~element): Chọn tất cả các phần tử cùng cấp sau một phần tử nhất định, ví dụ p ~ ul.

Pseudo-class Selectors (Bộ chọn giả lớp)

• :first-child: Chọn mỗi phần tử là con đầu tiên của cha mẹ của nó.
• :last-child: Chọn mỗi phần tử là con cuối cùng của cha mẹ của nó.
• :nth-child(n): Chọn mỗi phần tử là con thứ n của cha mẹ của nó.
• :nth-last-child(n): Chọn mỗi phần tử là con thứ n từ cuối lên của cha mẹ của nó.
• :not(selector): Chọn mỗi phần tử không phải là phần tử được chỉ định bởi bộ chọn.

Pseudo-elements Selectors (Bộ chọn giả phần tử)

• ::first-letter: Chọn chữ cái đầu tiên của mỗi phần tử p.
• ::first-line: Chọn dòng đầu tiên của mỗi phần tử p.
• ::before: Chèn nội dung trước nội dung của mỗi phần tử được chọn.
• ::after: Chèn nội dung sau nội dung của mỗi phần tử được chọn

Grouping Selectors (Bộ chọn nhóm)

• Selector List (,): Cho phép bạn áp dụng cùng một kiểu cho nhiều bộ chọn bằng cách liệt kê chúng và phân tách bằng dấu phẩy, ví dụ h1, h2, p

Các selector này cho phép bạn chọn các phần tử HTML dựa trên tên, ID, class, loại, thuộc tính, trạng thái, và mối quan hệ với các phần tử khác trong tài liệu. Sử dụng chúng một cách hiệu quả có thể giúp bạn tinh chỉnh kiểu dáng của trang web một cách chính xác.