Bộ chọn ID

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 13 trên 76.

Bộ chọn ID dùng để nhắm đến một phần tử HTML cụ thể dựa trên giá trị của thuộc tính id. Khác với bộ chọn class có thể dùng để tạo kiểu cho nhiều phần tử, bộ chọn ID là duy nhất và chỉ có thể áp dụng cho một phần tử trên trang. Vì vậy, bộ chọn này hữu ích khi bạn muốn tạo kiểu riêng cho từng phần tử mà không áp dụng kiểu đó cho phần tử nào khác.

Để chọn một phần tử có ID cụ thể trong CSS, bạn dùng ký hiệu thăng (#) theo sau là giá trị ID. Đây là cú pháp cơ bản để dùng bộ chọn ID:

#idname {
    property: value;
}

Ví dụ:

#intro {
    color: blue;
    font-size: 20px;
}

Trong ví dụ này, bộ chọn ID #intro nhắm đến phần tử có ID "intro". Các khai báo đặt màu chữ thành màu xanh dương và cỡ chữ thành 20 pixel cho phần tử này.

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có nhiều phần tử, bao gồm một tiêu đề (<h1>), một đoạn văn (<p>) và một phần tử phân chia (<div>). Nhiệm vụ của bạn là dùng bộ chọn ID để tạo kiểu cho phần tử phân chia. Làm theo các bước sau:

Thêm thuộc tính id có giá trị "special" vào phần tử <div>.
Viết một quy tắc CSS dùng bộ chọn ID để nhắm đến phần tử có ID "special". Đặt màu nền của phần tử này thành màu vàng và màu chữ thành màu đỏ.

Tự làm thử

<html>
<head>
    <title>ID Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>