Logo

Học CSS Selectors Nhanh: Cẩm Nang Đầy Đủ

Kiến thức Frontend

Học CSS Selectors Nhanh: Cẩm Nang Đầy Đủ

Tìm hiểu toàn bộ CSS Selectors từ cơ bản đến nâng cao: bộ chọn thẻ, class, id, nhóm, hậu duệ, pseudo-classes, thuộc tính và nhiều hơn nữa.

1. Bộ chọn cơ bản

  • * – Chọn tất cả các phần tử.

  • div – Chọn tất cả các thẻ div.

  • #id – Chọn phần tử có id cụ thể.

  • .class – Chọn tất cả các phần tử có class cụ thể.

2. Bộ chọn nhóm

  • div, p, h1 – Chọn nhiều loại phần tử cùng lúc.

3. Bộ chọn con

  • div > p – Chọn tất cả thẻ p là con trực tiếp của div.

4. Bộ chọn hậu duệ

  • div p – Chọn tất cả thẻ p bên trong div, không phân biệt cấp độ.

5. Bộ chọn anh chị em

  • div + p – Chọn phần tử p ngay sau div.

  • div ~ p – Chọn tất cả phần tử p sau div trong cùng cấp.

6. Bộ chọn trạng thái (Pseudo-classes)

  • :hover – Áp dụng khi phần tử được di chuột qua.

  • :focus – Áp dụng khi phần tử được focus (ví dụ: input khi nhập liệu).

7. Bộ chọn đầu tiên và cuối cùng

  • :first-child – Chọn phần tử đầu tiên trong một nhóm cùng cấp.

  • :last-child – Chọn phần tử cuối cùng trong một nhóm cùng cấp.

8. Bộ chọn con thứ N

  • :nth-child(n) – Chọn phần tử thứ n.

  • :nth-last-child(n) – Chọn phần tử thứ n từ cuối lên.

9. Bộ chọn kiểu phần tử (Type selectors)

  • :first-of-type – Chọn phần tử đầu tiên của loại đó.

  • :last-of-type – Chọn phần tử cuối cùng của loại đó.

  • :nth-of-type(n) – Chọn phần tử thứ n trong loại đó.

  • :only-of-type – Chọn phần tử duy nhất của loại đó.

10. Bộ chọn trạng thái kiểm tra (Form states)

  • :checked – Chọn input radio/checkbox được chọn.

  • :disabled – Chọn phần tử bị vô hiệu hóa.

  • :enabled – Chọn phần tử có thể tương tác.

11. Bộ chọn phủ định

  • :not(selector) – Chọn tất cả phần tử ngoại trừ phần tử được chỉ định.

12. Bộ chọn thuộc tính (Attribute selectors)

  • [type] – Chọn phần tử có thuộc tính type.

  • [type="text"] – Chọn phần tử có thuộc tính type="text".

  • [type^="te"] – Chọn phần tử có thuộc tính type bắt đầu bằng "te".

  • [type$="xt"] – Chọn phần tử có thuộc tính type kết thúc bằng "xt".

  • [type*="ex"] – Chọn phần tử có thuộc tính type chứa "ex".

13. Bộ chọn đặc biệt (Special selectors)

  • :root – Chọn phần tử gốc (<html>).

  • ::before – Chèn nội dung trước phần tử.

  • ::after – Chèn nội dung sau phần tử.

  • ::selection – Kiểu dáng cho phần văn bản được chọn.

✅ Kết luận

CSS Selectors là nền tảng quan trọng giúp bạn kiểm soát giao diện web một cách linh hoạt. Khi nắm vững từ cơ bản đến nâng cao, bạn có thể viết CSS hiệu quả, tối ưu hóa cấu trúc và dễ dàng tùy chỉnh giao diện theo nhu cầu.

Phản hồi (0)
0