Dấu # đi trước mã định danh
id nhận diện một phần tử riêng trong tài liệu. Giá trị id không chứa dấu cách và phải duy nhất trong trang. Không gán cùng id cho hai phần tử; khi cần nhóm nhiều phần tử, dùng class.
Với id="p1", bộ chọn #p1 chọn phần tử mang mã ấy; p#p1 yêu cầu thêm tên thẻ là p. Tên id phân biệt hoa–thường. Trong ví dụ chọn tên ngắn bắt đầu bằng chữ cái để viết CSS trực tiếp; cách đặt tên này cũng tránh phải xử lí các kí tự đặc biệt trong bộ chọn.
P1 riêng, P2 và P3 cùng nhóm
```html
<div id="dau_muc">
<p id="p1">Đoạn P1</p>
<p class="nhom">Đoạn P2</p>
<section><p class="nhom">Đoạn P3</p></section>
</div>
<p>Đoạn còn lại</p>
```
```css
p { color: navy; }
#p1 { border: 2px solid teal; }
p.nhom { background-color: #fff8dc; }
div#dau_muc > p { font-weight: bold; }
```
#p1 đặt viền riêng cho P1. P2 và P3 cùng lớp nhom nên p.nhom đặt nền giống nhau. p đặt màu chữ chung navy cho cả các đoạn. Như vậy có thể phân biệt một đoạn riêng, một nhóm và phần còn lại.
div#dau_muc > p chọn P1, P2: cả hai là con trực tiếp của div mang id dau_muc. P3 nằm qua section nên không khớp điều kiện >, dù vẫn thuộc nhóm nhom.
Đọc phần tử cuối của bộ chọn
```html
<p class="can_doc">Đoạn A <em id="tu_khoa">nhấn mạnh</em>.</p>
<p>Đoạn B <em>còn lại</em>.</p>
```
```css
p.can_doc em#tu_khoa { color: red; }
```
p.can_doc em#tu_khoa chọn em có id tu_khoa khi em nằm trong một p thuộc lớp can_doc. Quy tắc đặt màu cho em cuối chuỗi, không đặt cho mọi p. Trong mẫu, chỉ cụm “nhấn mạnh” được tô đỏ bởi quy tắc này.
Bài luyện
Muốn P2 và P3 dùng chung một kiểu, cách nào phù hợp với bài?
id phải duy nhất trong trang.
Gán trùng id cho nhiều p không phù hợp.
Không có id p2 thì #p2 không khớp theo dự kiến.
Đúng. class dùng cho nhóm phần tử.
Lời giải
class có thể gán cho nhiều phần tử, nên phù hợp để P2 và P3 cùng nhóm. id phải duy nhất, dùng nhận diện một phần tử riêng; không dùng id trùng để thay nhóm lớp.
Bài luyện
Trong mẫu P1–P2–P3, div#dau_muc > p chọn gì?
P3 có cha trực tiếp là section.
Đúng. P1 và P2 trực tiếp thuộc div đã nêu.
P3 không trực tiếp thuộc div.
Bộ chọn có điều kiện id và quan hệ >.
Lời giải
div#dau_muc xác định div đúng id. Dấu > chỉ chọn các p con trực tiếp, nên chọn P1 và P2. P3 nằm qua section; đoạn còn lại ở ngoài div.
Bài luyện
p.can_doc em#tu_khoa đặt định dạng cho đối tượng nào khi khớp?
Đối tượng cuối chuỗi là em, không phải p.
Chuỗi không yêu cầu div.
Đúng. Kết hợp tên thẻ, lớp, id và quan hệ con cháu.
tu_khoa là giá trị id sau dấu #.
Lời giải
Đọc từ phải: em#tu_khoa là em mang id tu_khoa. Khoảng trắng yêu cầu nó là con hoặc cháu của p.can_doc. Khi các điều kiện đều đáp ứng, định dạng áp dụng cho em đó.
Đang học