Giới thiệu về Bộ chọn CSS

TL;DR / Tổng quan

Một bộ chọn CSS (CSS selector) chỉ ra những phần tử HTML nào sẽ áp dụng quy tắc kiểu dáng. Đây là điểm khởi đầu của bất kỳ quy tắc CSS nào. Trong Nilead, hiểu cách hoạt động của bộ chọn giúp bạn áp dụng kiểu dáng chính xác bằng Trình chỉnh sửa trực quan hoặc qua CSS tùy chỉnh.

Điều kiện tiên quyết

• Có quyền truy cập vào dự án trên Nilead với chức năng tạo kiểu đã được bật

• Quen thuộc với các phần tử HTML cơ bản

• Tùy chọn: Có quyền truy cập vào bảng mã tùy chỉnh để chèn CSS thủ công

Hướng dẫn chi tiết

Bộ chọn là gì?

Một bộ chọn là phần của quy tắc CSS dùng để định vị các phần tử HTML cụ thể. Không có bộ chọn, quy tắc kiểu sẽ không áp dụng được vào đâu cả.

Ví dụ:

h1 { color: red; }

Trong trường hợp này, h1 là bộ chọn — nó nhắm đến tất cả các phần tử <h1> và đặt màu chữ thành đỏ.

Các loại bộ chọn CSS

1. Bộ chọn theo loại (Type Selector)

Nhắm đến tất cả các trường hợp của một thẻ HTML nhất định.

p { font-size: 16px; }

Áp dụng cho tất cả thẻ <p>.

2. Bộ chọn theo class

Nhắm đến các phần tử có thuộc tính class nhất định.

.box { background-color: #f0f0f0; }

Áp dụng cho bất kỳ phần tử nào có class="box".

💡 Mẹo: Class có thể tái sử dụng. Bạn có thể áp dụng cùng một class cho nhiều phần tử.

3. Bộ chọn theo ID

Nhắm đến một phần tử duy nhất có thuộc tính ID nhất định.

#hero { height: 500px; }

Chỉ áp dụng cho phần tử có id="hero".

⚠️ Mỗi ID nên duy nhất trên mỗi trang.

Bộ chọn theo thuộc tính (Attribute Selectors)

Sử dụng để tạo kiểu cho phần tử dựa trên thuộc tính cụ thể.

Ví dụ:

a[title] { text-decoration: underline; }
a[href="https://example.com"] { color: green; }

• Nhắm đến các thẻ anchor có thuộc tính title hoặc giá trị href cụ thể.

Pseudo-class và Pseudo-element

Áp dụng kiểu dáng dựa trên trạng thái hoặc phần của phần tử.

Ví dụ:

a:hover { color: blue; }

• :hover áp dụng khi người dùng rê chuột lên liên kết.

Các pseudo-class phổ biến khác:

• :focus – phần tử được tập trung (ví dụ trường nhập liệu)

• :first-child – phần tử con đầu tiên của cha

• :nth-child(n) – phần tử con thứ n (ví dụ mỗi hàng thứ 2)

Bộ kết hợp (Combinators)

Bộ kết hợp định nghĩa mối quan hệ giữa các phần tử.

Ví dụ:

article > p { font-weight: bold; }

• Chọn những phần tử <p> là con trực tiếp của <article>

Các bộ kết hợp khác:

Câu hỏi thường gặp (FAQs)

1. Tôi có thể sử dụng nhiều bộ chọn trong một quy tắc không?
Có, hãy dùng dấu phẩy:

h1, h2, h3 { font-family: sans-serif; }

2. Sự khác biệt giữa bộ chọn class và ID là gì?
ID là duy nhất, class có thể tái sử dụng. Hãy dùng class để tạo kiểu, dùng ID cho liên kết neo hoặc thao tác bằng JS.

3. Tôi có thể kết hợp các bộ chọn không?
Có. Ví dụ:

div.box:hover { background: yellow; }

4. Tôi có thể viết CSS tùy chỉnh trong Nilead không?
Có — sử dụng Bảng mã tùy chỉnh (Custom Code Panel) hoặc chèn qua Plugin cho các kiểu dáng toàn cục.

5. Visual Editor có hỗ trợ pseudo-class không?
Dù không hiển thị trực tiếp, hiệu ứng của các pseudo-class (như :hover) có thể xem trước trong tương tác hoặc qua CSS tùy chỉnh.