Khi so sánh CSS class vs ID, khác biệt là CSS class áp dụng style cho nhiều phần tử. ID, mặt khác, áp dụng style cho một phần tử duy nhất (unique). ID cũng đặc biệt vì bạn có thể dùng URL đặc biệt để liên kết trực tiếp đến phần tử và nó được JavaScript dùng.
Trong CSS, bộ chọn (selectors) được dùng để nhắm mục tiêu (target) một phần tử cụ thể hoặc phạm vi phần tử trên trang web. Khi phần tử đã được nhắm mục tiêu, một style hoặc tập hợp style có thể được áp dụng cho phần tử.
Có nhiều loại bộ chọn. Hai cái thường dùng nhất là class và ID. Cả hai dùng để nhắm mục tiêu phần tử mà style nên được áp dụng.
Bộ chọn CSS Class vs ID
Sự khác biệt giữa bộ chọn class và ID là gì? Đây là câu hỏi nhiều nhà phát triển mới với CSS hỏi, và một cái chúng ta sẽ trả lời trong hướng dẫn này.
Cuối bài, bạn sẽ biết sự khác biệt giữa hai bộ chọn này. Bạn sẽ có thông tin cần để quyết định có thông tin dùng bộ chọn nào trong code. Hãy bắt đầu.
Bộ chọn CSS (CSS Selectors)
Khi thiết kế trang web, bạn sẽ muốn một số style áp dụng cho phần tử cụ thể trên trang. Ví dụ, bạn có thể muốn đặt màu chữ của tất cả thẻ <p> thành xanh lá hoặc thay đổi kích thước font của header.
Bộ chọn cho phép bạn nhắm mục tiêu phần tử cụ thể trên trang web mà bạn có thể áp dụng style. Trong CSS, có nhiều bộ chọn, như bộ chọn toàn cục (universal selectors), bộ chọn hậu duệ (descendant selectors), bộ chọn con (child selectors), và bộ chọn nhóm (grouping selectors). Nếu bạn quan tâm học thêm về bộ chọn CSS, đọc hướng dẫn người mới cho bộ chọn CSS.
Hai bộ chọn, class và id, được dùng để áp dụng style cho phần tử dựa trên class và ID gán cho phần tử HTML, tương ứng. Nhưng các bộ chọn này thường bị nhầm lẫn, nên hãy khám phá cách mỗi cái hoạt động.
Bộ chọn ID là duy nhất (Unique)
Bộ chọn id cho phép bạn định nghĩa quy tắc style áp dụng cho một phần tử đơn lẻ trên trang web. Mỗi trang web chỉ có thể có một phần tử với một thuộc tính ID đơn lẻ. Điều này nghĩa là bộ chọn ID không bao giờ có thể dùng để style nhiều hơn một phần tử.
Bộ chọn ID được định nghĩa dùng dấu thăng (# - hash sign). Chúng ngay lập tức theo sau bởi giá trị ID bạn muốn áp dụng tập quy tắc style. Đây là ví dụ bộ chọn ID hoạt động:
<html> <p id="betaBanner">This is a banner.</p> <style> #betaBanner { color: white; background-color: orange; }
Style này áp dụng cho phần tử <p> trong tài liệu HTML với ID betaBanner. Style sẽ đặt màu nền phần tử thành cam và màu chữ trong phần tử thành trắng.
Bộ chọn Class không duy nhất (Not Unique)
Bộ chọn class cho phép bạn định nghĩa quy tắc style áp dụng cho bất kỳ phần tử nào với thuộc tính class bằng một giá trị nhất định.
Như chúng ta đã thảo luận, bộ chọn ID chỉ có thể dùng để style một phần tử. Điều này vì ID chỉ có thể dùng một lần trên trang web. Class, mặt khác, có thể dùng qua nhiều phần tử. Vì vậy, nếu bạn áp dụng style dùng bộ chọn class, bất kỳ phần tử nào chia sẻ class đó sẽ chịu tác động của style bạn định nghĩa.
Bộ chọn class được định nghĩa dùng dấu chấm (period), theo sau bởi giá trị class bạn muốn áp dụng tập style. Đây là ví dụ bộ chọn class hoạt động:
<html> <p class="orangeBackground">This is a banner.</p> <div class="orangeBackground">This is a banner.</div> <style> .orangeBackground { background-color: orange; }
Style này đặt màu nền thẻ <p> thành cam. Ngoài ra, style đặt màu nền thẻ <div> thành cam. Điều này vì cả hai thẻ chia sẻ tên class: orangeBackground.
Ngoài ra, phần tử web có thể chia sẻ nhiều class khác nhau. Vì vậy, nếu chúng ta muốn áp dụng class gọi là large cho thẻ <div> trên, chúng ta có thể làm vậy dùng code:
<html> <div class="orangeBackground large">This is a banner.</div>
Trong code này, bất kỳ quy tắc style nào định nghĩa cho class orangeBackground và large được áp dụng cho phần tử web. Với ID, mặt khác, chúng ta không thể lặp lại hành vi này, vì mỗi phần tử chỉ có thể có một ID.
ID có chức năng trình duyệt duy nhất (Unique Browser Function)
Cho đến nay, chúng ta đã thảo luận ID chỉ có thể áp dụng style cho một phần tử. Khác với class có thể áp dụng style cho nhiều phần tử. Đây không phải sự khác biệt duy nhất giữa bộ chọn class và ID.
Trong trình duyệt, class không có chức năng đặc biệt. Mục đích chính là cho phép bạn áp dụng style cho một loạt phần tử trên trang web. ID, mặt khác, có thể được trình duyệt dùng để điều hướng đến phần cụ thể của trang web.
Nếu bạn gán phần tử một ID, bạn có thể dùng URL đặc biệt để liên kết trực tiếp đến phần tử đó. Hành vi này hoạt động vì ID là duy nhất trên trang web.
Giả sử chúng ta muốn gửi link đến trang web cuộn tự động người dùng đến header. Chúng ta có thể làm vậy dùng code:
<h3 id="section3">Section Three</h3>
Trong code này, chúng ta gán ID cho thẻ <h3> chứa văn bản Section Three. Bây giờ, chúng ta có thể gửi người dùng link trực tiếp cuộn họ đến phần tử đó trên trang web. Điều này được làm bằng URL:
https://domain.com/index.html#section3
Khi người dùng điều hướng đến URL này, (nơi domain.com là URL trang web của bạn), họ sẽ cuộn đến heading với ID section3. Hành vi này không áp dụng cho class.
ID được JavaScript dùng
Nếu bạn có kinh nghiệm dùng JavaScript, bạn sẽ biết ID thường dùng trong ngôn ngữ lập trình đó. Hàm getElementById cho phép bạn chọn phần tử trên trang web. Nó dựa trên thực tế chỉ một phần tử có thể chia sẻ cùng ID.
Class, mặt khác, có thể phản ánh nhiều phần tử trên trang web. Chúng sẽ không hữu ích nếu bạn muốn làm việc với phần tử cụ thể trong JavaScript.
Bạn có thể dùng cả ID và CSS Class Selectors
Không có quy tắc trong HTML ngăn cản bạn gán phần tử cả ID và class.
Giả sử bạn muốn áp dụng style liên quan đến class gọi là backgroundOrange cho thẻ <div>. Tuy nhiên, bạn cũng muốn áp dụng vài style độc đáo cho <div>. Bạn có thể làm vậy dùng code:
<div class="backgroundOrange" id="customDiv"></div>
Thẻ <div> này sẽ chịu tác động style cho class backgroundOrange. Ngoài ra, nó cũng sẽ dùng style áp dụng cho ID customDiv dùng bộ chọn ID.
Kết luận
Khi bạn làm việc với CSS, không có lý do cụ thể ép bạn dùng ID thay vì class. Tuy nhiên, phương pháp hay là chỉ dùng ID nếu bạn muốn style áp dụng cho một phần tử trên trang web, và dùng class nếu bạn muốn style áp dụng cho nhiều phần tử.
Trong hướng dẫn này, chúng ta đã thảo luận, tham chiếu ví dụ, cơ bản về bộ chọn CSS ID và class, và so sánh đối lập hai cái. Bây giờ bạn sẵn sàng bắt đầu dùng bộ chọn CSS ID và class như nhà phát triển chuyên nghiệp!