Bộ chọn ID

Bài học 5 trên 15 trong khóa học Bộ chọn CSS của Coddy.

Bộ chọn ID là một loại bộ chọn CSS dùng để chọn các phần tử có thuộc tính ID cụ thể. Thuộc tính ID là thuộc tính tùy chỉnh mà bạn có thể thêm vào các phần tử HTML để nhận diện duy nhất chúng.

Để chọn các phần tử có ID cụ thể, bạn dùng ký hiệu thăng (#) theo sau là giá trị ID. Ví dụ, bộ chọn #my-id chọn phần tử có ID my-id.

Sau đây là ví dụ về cách dùng bộ chọn ID để tạo kiểu cho một trang web:

#my-id {
  color: red;
  font-size: 2em;
}

Để thêm ID vào một phần tử, hãy viết:

<div id="my-id"></div>

Cũng giống như bộ chọn Class, quy tắc CSS này sẽ tạo kiểu cho phần tử có ID my-id thành màu đỏ và có cỡ chữ là 2em.

Thử thách

Dễ

Đây là bài tập để kiểm tra mức độ hiểu của bạn về bộ chọn ID:

Tạo một trang web có hai phần tử div.
Đặt ID my-id cho phần tử div đầu tiên.
Dùng bộ chọn ID để tạo kiểu cho phần tử div có ID my-id thành một màu bất kỳ không phải màu đen và đặt cỡ chữ là 30px.

Tự làm thử

<html>
<head>
  <title>ID Selector Exercise</title>
  <style>
    /* CSS Code goes here */
  </style>
</head>
<body>
    
</body>
</html>

Tất cả bài học trong Bộ chọn CSS

1Giới thiệu về CSS Selectors

Mục đích của CSS Selectors Vì sao chúng quan trọng?

4Bộ chọn thuộc tính

Giới thiệu về bộ chọn thuộc tính Sự hiện diện và giá trị chính xác Bộ chọn giá trị thuộc tính Bộ chọn giá trị thuộc tính II Bộ chọn giá trị thuộc tính III

2Bộ chọn đơn giản

Bộ chọn kiểu Bộ chọn lớpBộ chọn IDBộ chọn phổ quát

3Bộ chọn kết hợp

Bộ chọn phần tử con Bộ chọn phần tử hậu duệ Bộ chọn phần tử anh em liền kề Bộ chọn phần tử anh em tổng quát

Tự luyện tập: Playground Web