Bộ Chọn Trong CSS (CSS Selector) - Lập Trình Từ Đầu

1.Bộ chọn trong CSS (CSS Selector) là gì ?

Bộ chọn trong CSS được sử dụng để “tìm” (hoặc chọn) các phần tử HTML mà bạn muốn tạo kiểu

Chúng ta có thể chia các bộ chọn CSS thành các loại như sau:

• Bộ chọn đơn giản
• Bộ chọn bộ kết hợp
• Bộ chọn lớp giả
• Bộ chọn phần tử giả
• Bộ chọn thuộc tính

2. Bộ chọn phần tử trong CSS

Bộ chọn phần tử chọn các phần tử HTML dựa trên tên phần tử

Ví dụ:

3. Bộ chọn id trong CSS

Bộ chọn id sử dụng thuộc tính id của một phần tử HTML để chọn một phần tử cụ thể

Id của một phần tử là duy nhất trong một trang, do đó, bộ chọn id được sử dụng để chọn một phần tử duy nhất!

Để chọn một phần tử có một id cụ thể, hãy viết một ký tự thăng (#), sau đó là id của phần tử

Ví dụ:

Ở đây, tôi xác định chỉ phần tử có id là “test” mới được tạo kiểu

Lưu ý: Tên id không được bắt đầu bằng số!

4. Bộ chọn class trong CSS

Bộ chọn class chọn các phần tử HTML với một thuộc tính lớp cụ thể

Để chọn các phần tử với một lớp cụ thể, hãy viết một ký tự dấu chấm (.), theo sau là tên lớp

Ví dụ:

Ở đây, tôi xác định chỉ phần tử có class là “abc” mới được tạo kiểu

Lưu ý: Tên class không được bắt đầu bằng số!

Bạn cũng có thể chỉ định rằng chỉ các phần tử HTML cụ thể mới bị ảnh hưởng bởi một lớp

Ví dụ:

Ở đây, chỉ có phần tử được chỉ định là <p> được tạo kiểu

5. Bộ chọn chung trong CSS

Bộ chọn chung áp dụng cho tất cả các phần tử trong trang, để chọn tất cả các phần tử ta viết dấu sao (*)

Ví dụ:

Ở đây, tôi xác định tất cả các phần tử trong trang có nền là màu xanh và màu chữ là màu đỏ

6. Bộ chọn theo nhóm trong CSS

Bộ chọn theo nhóm chọn tất cả các phần tử có cùng kiểu CSS, các phần tử ngăn cách nhau bởi dấu phảy (,)

Ví dụ: