Các phần tử HTML có thể được xác định theo loại, lớp, thuộc tính, trạng thái giả hoặc tên ID. Khi sử dụng CSS selectors, cách bạn nhóm chúng sẽ ảnh hưởng đến cách bạn tùy chỉnh chúng. Ví dụ: nếu bạn muốn thực hiện các thay đổi lớn trên trang web của mình, thì bạn có thể sử dụng type selector. Giả sử bạn thích tạo phong cách cho mọi yếu tố trên trang web của bạn thì bạn có thể sử dụng selector span { style properties }.
Để thực hiện các thay đổi chi tiết hơn, bạn cần một bộ chọn cụ thể hơn. Cụ thể nhất là một bộ chọn ID. Hãy cùng xem xét kỹ hơn về ID selector qua bài viết này nhé.
1. CSS ID selector là gì?
Bộ chọn ID CSS sử dụng thuộc tính ID của thành phần HTML để chọn một thành phần duy nhất trên trang. Để sử dụng bộ chọn ID trong CSS, bạn chỉ cần viết hashtag (#) theo sau là ID của phần tử. Sau đó đặt các kiểu thuộc tính bạn muốn áp dụng cho phần tử trong ngoặc.
Đây là một ví dụ về cú pháp của bộ chọn ID trong CSS:
#idname { style properties }
2. Làm thế nào để sử dụng ID trong CSS?
Quy tắc đầu tiên cần ghi nhớ khi sử dụng thuộc tính ID là nó phải chứa ít nhất một ký tự và không thể bắt đầu bằng một số.
Giả sử như mình có nhiều thẻ h2 trên trang web của mình và các thẻ h2 sẽ đánh dấu sự khởi đầu của một phần mới. Sau đó thì mình có thể cung cấp cho mỗi thẻ h2 một tên ID. Ví dụ:
Đừng code thế này nhé:
Quy tắc thứ hai cần ghi nhớ là nếu một yếu tố được cung cấp tên ID, thì nó phải là duy nhất trong một trang. Bằng cách đó, bộ chọn ID chỉ chọn một yếu tố duy nhất.
Quay trở lại ví dụ về nhiều thẻ h2, giả sử mình muốn mỗi thẻ h2 này có một kiểu khác nhau để gợi ý trực quan cho người đọc khi một phần mới bắt đầu. Trong trường hợp đó, mình sẽ cung cấp cho mỗi thẻ h2 một tên ID duy nhất để mình có thể sử dụng các bộ chọn ID để áp dụng một bộ giá trị thuộc tính duy nhất cho từng thẻ h2.
Ví dụ như sau:
Bạn không nên làm như sau:
Để có thể thay font size của mỗi thẻ h2, bạn có thể làm như sau:
Và đây là kết quả:
Quy tắc cuối cùng cần lưu ý khi sử dụng bộ chọn ID là giá trị thuộc tính của bộ chọn ID phải khớp chính xác với tên ID.
Sử dụng HTML từ ví dụ trên, CSS sau đây sẽ chính xác:
Sẽ không đúng nếu bạn làm thế này:
Nếu bạn sử dụng CSS này với chữ “c” viết thường, các bộ chọn CSS ID và các quy tắc CSS cấu thành của chúng sẽ không được áp dụng. Thay vào đó, kiểu h2 mặc định trong Bootstrap sẽ hiển thị như sau:
Bây giờ thì các bạn đã có thể hiểu được ID Selector là gì và làm thế nào để sử dụng nó trong CSS. Tiếp theo, hãy chắc chắn rằng bạn biết được sự khác biệt giữa Class và ID trong CSS nhé.
3. Đâu là sự khác biệt giữa Class Selector và ID Selector?
Trong CSS, Class được sử dụng để nhóm nhiều hơn một phần tử, trong khi ID được sử dụng để xác định một phần tử nào đó. Vì vậy, Class Selector được sử dụng với nhiều phần tử HTML của cùng một lớp, trong khi ID Selector được sử dụng cho duy nhất một phần tử HTML. Bạn có thể phân biệt được Class Selector bằng cú pháp .classname và ID Selector là #IDname.
Một điểm khác biệt chính giữa bộ chọn Class và bộ chọn ID là tính cụ thể. Các bộ chọn CSS có các mức độ cụ thể khác nhau để nếu một phần tử HTML được lựa chọn bởi nhiều bộ chọn khác nhau, trình duyệt sẽ áp dụng quy tắc CSS của bộ chọn với tính cụ thể cao hơn.
Khi so sánh Class với ID, bộ chọn ID có tính cụ thể cao hơn và do đó mạnh hơn. (Trên thực tế, bộ chọn ID mạnh đến mức chỉ có !important property mới có thể ghi đè chúng trong CSS.) Điều đó có nghĩa là nếu một phần tử được lựa chọn bởi bộ chọn ID và bộ chọn Class, kiểu CSS của bộ chọn ID sẽ được áp dụng cho phần tử đó. Hãy cùng xem một ví dụ minh họa cho quy tắc này dưới đây.
Giả sử như mình muốn tạo một button “Subscribe” trên trang web. Mình muốn nền của button này sẽ là màu đỏ và chữ màu trắng.
Đây sẽ là code HTML:
Code CSS:
Và đây là kết quả:
Bây giờ mình lại muốn button “Subscribe” ở trang Homepage sẽ nổi bật hơn ở những trang khác nên mình sẽ sử dụng ID Selector để trang trí riêng cho button “Subscribe” ở trang Homepage. Những buttons khác nếu không có ID Selector thì sẽ vẫn áp dụng những nguyên tắc của Class Selector.
Đây sẽ là code CSS của button “Subscribe” của trang Homepage:
Đây là kết quả:
Trên đây là những gì bạn cần biết về ID trong CSS. Với bộ chọn ID, bạn có thể kiểm soát quy trình và mã tùy chỉnh của mình bằng cách lựa chọn một yếu tố duy nhất trên trang. Để sử dụng ID, bạn chỉ cần có kiến thức cơ bản về HTML và CSS.