Bộ chọn (selector) trong CSS đóng vai trò xác định phạm vi các phần tử HTML sẽ chịu tác động của quy tắc kiểu dáng. Việc hiểu rõ cơ chế này giúp tối ưu hóa quá trình phát triển giao diện.

1. Bộ chọn thẻ (Tag Selector)

Cú pháp cơ bản sử dụng trực tiếp tên thẻ HTML để áp dụng style cho toàn bộ các thẻ cùng loại trong tài liệu.

<style>p { font-weight: bold; }</style> // Làm đậm toàn bộ thẻ p

Cơ chế này hoạt động ngay cả với các thẻ tùy chỉnh không nằm trong đặc tả HTML chuẩn.

<style>custom-element { color: blue; }</style>
<custom-element>Nội dung tùy chỉnh</custom-element>

2. Bộ chọn ID (ID Selector)

Sử dụng ký hiệu # kèm theo giá trị thuộc tính id để nhắm mục tiêu duy nhất.

<style>#wrapper { background: #f0f0f0; }</style>
<div id="wrapper"></div>

Mặc dù chuẩn khuyến nghị mỗi id là duy nhất trong một trang, trình duyệt vẫn áp dụng style nếu có nhiều phần tử trùng id.

3. Bộ chọn lớp (Class Selector)

Sử dụng ký hiệu . followed by tên class. Khác với id, một class có thể được gán cho nhiều phần tử.

<style>.container { margin: 0 auto; }</style>

Một phần tử có thể mang nhiều class, các tên class cách nhau bằng khoảng trắng.

4. Bộ chọn quan hệ (Combinators)

• Bộ chọn con cháu (Descendant): Chọn tất cả phần tử nằm sâu bên trong.

<style>.container p { color: green; }</style> // Chọn mọi thẻ p trong .container
<div class="container">
  <p>Hiệu lực</p>
  <section>
    <p>Hiệu lực</p>
  </section>
</div>

• Bộ chọn con trực tiếp (Child): Chỉ chọn phần tử con ngay lập tức.

<style>.container > p { color: green; }</style> // Chỉ chọn p trực tiếp con của .container
<div class="container">
  <p>Hiệu lực</p>
  <section>
    <p>Không hiệu lực</p>
  </section>
</div>

• Bộ chọn anh em kề nhau (Adjacent Sibling): Chọn phần tử đứng ngay sau.

<style>.item + span { text-decoration: underline; }</style>
<div class="item">A</div>
<span>B (Hiệu lực)</span>
<span>C (Không hiệu lực)</span>

• Bộ chọn anh em chung cấp (General Sibling): Chọn tất cả phần tử cùng cấp đứng sau.

<style>.item ~ span { text-decoration: underline; }</style>
<div class="item">A</div>
<span>B (Hiệu lực)</span>
<span>C (Hiệu lực)</span>

5. Bộ chọn nhóm (Grouping Selector)

Cho phép áp dụng cùng một quy tắc cho nhiều bộ chọn khác nhau bằng dấu phẩy.

<style>.btn, .link { cursor: pointer; }</style>
<div class="btn"></div>
<a class="link"></a>

6. Bộ chọn thuộc tính (Attribute Selector)

Cho phép lọc phần tử dựa trên giá trị thuộc tính HTML.

• [attr="value"]: Khớp chính xác giá trị.
• [attr^="value"]: Khớp giá trị bắt đầu bằng chuỗi.
• [attr$="value"]: Khớp giá trị kết thúc bằng chuỗi.
• [attr*="value"]: Khớp giá trị chứa chuỗi.

7. Bộ chọn vạn năng (Universal Selector)

Ký hiệu * chọn tất cả các phần tử trong phạm vi xác định.

* { box-sizing: border-box; } // Áp dụng cho mọi phần tử
div * { color: inherit; } // Áp dụng cho mọi phần tử con của div

8. Bộ chọn giả (Pseudo Classes & Elements)

Dùng để định dạng trạng thái đặc biệt hoặc vị trí ảo của phần tử.

<style>
a:hover { color: orange; } // Khi di chuột vào
p::before { content: "Note: "; } // Chèn nội dung ảo trước thẻ p
</style>