Bộ chọn ID CSS nhắm mục tiêu phần tử HTML với ID duy nhất.
Cú pháp bộ chọn ID:
#tên-id { tên-thuộc-tính: giá-trị; }Đây là phần tử HTML với cùng tên ID làm giá trị thuộc tính:
<div id="tên-id"></div>Bộ chọn ID CSS #tên-id gắn với phần tử <div> có thuộc tính tên-id. Nghĩa là bất kỳ thuộc tính định kiểu bạn thêm vào #tên-id trong bảng định kiểu CSS sẽ áp dụng cho <div>.
Ký hiệu thăng (#) trước tên ID là cú pháp CSS cụ thể. Khi bạn thêm tên ID vào phần tử HTML làm thuộc tính ID, bạn không dùng ký hiệu #.
Bây giờ hãy dùng những gì vừa học vào ví dụ thực tế.
Đây là phần tử HTML <button> với một số kiểu mặc định kế thừa từ User Agent Stylesheet của trình duyệt:
<button>Nút bấm</button>Giao diện mặc định:
Chán nhỉ?
Hãy ghi đè kiểu mặc định nút bấm bằng cách tạo CSS ID gọi là #my-button và cho nó vài thuộc tính định kiểu:
#my-button { font-size: 18px; padding: 14px 24px; border-radius: 8px; border: none; background-color: #F7575C; color: white; }Sau đó thêm ID vào phần tử nút bấm làm thuộc tính ID:
<button id="my-button">Nút bấm</button>Kết quả:
Điều quan trọng nhất về bộ chọn ID là khác với bộ chọn class, ID chỉ có thể áp dụng cho một phần tử trên trang. Điều này làm ID kém linh hoạt hơn class, nhưng cũng dễ dự đoán hơn.
Quy tắc chung là chỉ dùng ID cho phần tử đơn xuất hiện một lần trên trang, như header, footer, hoặc thanh điều hướng.