Dùng cặp ngoặc vuông
[href] chọn các phần tử có thuộc tính href; không yêu cầu một giá trị href cụ thể. a[target="_blank"] chọn phần tử a có target đúng bằng _blank.
Tên trong cặp ngoặc là **thuộc tính HTML** đặt trên phần tử, như href hoặc target. Đây khác thuộc tính CSS bên trong dấu ngoặc nhọn, như color và border. Không viết .href để thay [href], vì dấu chấm yêu cầu lớp có tên href.
Liên kết A, B và phần tử a C
```html
<p id="dich">Điểm đến</p>
<a href="#dich" target="_blank">A</a>
<a href="#dich">B</a>
<a id="cho">C</a>
```
```css
[href] { border: 1px solid blue; }
a[target="_blank"] { color: maroon; font-weight: bold; }
```
A và B đều có href nên nhận viền xanh dương. Chỉ A có target="_blank" nên nhận chữ maroon và đậm từ quy tắc thứ hai. C là a không có href, nên không khớp [href].
Khi đổi giá trị target của A hoặc thêm href cho C, bộ chọn khớp có thể đổi theo thuộc tính. Không cần đổi tên thẻ để áp dụng kiểu khác nhau.
Bài luyện
Trong mẫu A–B–C, [href] khớp phần tử a nào?
Đúng. A và B có thuộc tính href.
B cũng có href.
C không có href.
C không đáp ứng thuộc tính yêu cầu.
Lời giải
[href] kiểm sự có mặt của thuộc tính href. A và B có href="#dich" nên khớp; C chỉ có id, không có href, nên không khớp.
Bài luyện
a[target="_blank"] chọn gì trong mẫu?
Ngoài tên thẻ còn cần đúng thuộc tính/giá trị.
id không thay thế điều kiện target.
Đúng. Chỉ A có target="_blank".
Đây không phải bộ chọn lớp.
Lời giải
Bộ chọn yêu cầu phần tử a đồng thời có target đúng bằng _blank. A đáp ứng; B và C không có target ấy, nên không khớp.
Bài luyện
Trong [href] { border:1px solid blue; }, href và border lần lượt là gì?
href đang xét thuộc tính của phần tử HTML.
border ở đây là thuộc tính CSS.
Không có dấu chấm hoặc # trong bộ chọn này.
Đúng. Hai vị trí có vai trò khác nhau.
Lời giải
Cặp ngoặc vuông [href] kiểm thuộc tính href trên phần tử HTML. Trong ngoặc nhọn, border là thuộc tính CSS đặt đường viền cho các phần tử đã khớp bộ chọn.
Đang học