HTML/CSS | ID và Class

Học HTML, CSS từ Zero Tới Hero

• Thuộc tính ID
• 1. Trường hợp sử dụng đúng
• 2. Trường hợp sử dụng sai
• Thuộc tính class
• So sánh ID và class
• Trường hợp sử dụng
• Trường hợp dùng ID
• Trường hợp dùng class

ID và class là 2 thuộc tính thường được sử dụng trong HTML. Cả 2 thuộc tính này đều là Global Attributes, vì vậy chúng có thể được sử dụng cho mọi thẻ HTML.

Mỗi phần tử có thể đồng thời vừa sử dụng ID và class.

Thuộc tính ID

• Mỗi phần tử chỉ có thể có một ID
• Mỗi ID là duy nhất trong một trang (không có trường hợp từ 2 phần tử sử dụng chung một ID)

1. Trường hợp sử dụng đúng

<h1 id="primary-heading">Heading 1</h1>
<h2 id="sub-heading">Heading 2</h2>

Ví dụ trên hợp lệ vì:

• Sử dụng một ID trên mỗi phần tử
• Các ID trên mỗi phần tử là duy nhất

2. Trường hợp sử dụng sai

<h1 id="heading primary-heading">Heading 1</h1>
<h2 id="heading">Heading 2</h2>
<h3 id="heading">Heading 3</h3>

Ví dụ trên không hợp lệ vì:

• Sử dụng nhiều hơn một ID trên mỗi phần tử (id="heading primary-heading"), điều này chỉ hợp lệ với class
• ID heading đang sử dụng lặp lại cho nhiều thẻ

Thuộc tính class

• Có thể sử dụng nhiều class trên một phần tử
• Có thể sử dụng cùng một class trên nhiều phần tử

So sánh ID và class

#	ID	Class
Sử dụng nhiều / một phần tử	❌	✅
Tái sử dụng / một trang	❌	✅

Trường hợp sử dụng

Trường hợp dùng ID

Khi xác định được một thành phần trong trang web chỉ xuất hiện một phần duy nhất (không bắt buộc).

Thông thường bạn cần có kiến thức phân biệt và gọi tên các thành phần trên trang web thì điều này sẽ dễ hơn. Khi ấy, dựa vào kinh nghiệm, bạn có thể biết loại thành phần nào sẽ là duy nhất trên một trang.

Trường hợp dùng class

Khi xác định được nhiều phần tử có chung styles, dùng class sẽ giúp viết code CSS một lần và tái sử dụng trên các phần tử này.

Nếu không chắc một phần tử có phải là duy nhất hay không (hiện tại và tương lai) thì bạn có thể sử dụng class.