Sự hiện diện và giá trị chính xác

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

Trong bài học này, bạn sẽ tìm hiểu về bộ chọn sự hiện diện của thuộc tính và bộ chọn giá trị chính xác. Bộ chọn thuộc tính dùng để chọn phần tử dựa trên việc một thuộc tính có tồn tại hay không, hoặc dựa trên giá trị chính xác của thuộc tính đó.

Bộ chọn sự hiện diện của thuộc tính:

Bộ chọn sự hiện diện của thuộc tính nhắm đến các phần tử có một thuộc tính cụ thể, bất kể giá trị của thuộc tính đó là gì. Bộ chọn này được viết bằng dấu ngoặc vuông, bên trong là tên thuộc tính.

Ví dụ:

/* Chọn tất cả phần tử có thuộc tính (attribute) "target" */
[target] {
   color: blue;
}

Bộ chọn giá trị chính xác:

Bộ chọn giá trị chính xác nhắm đến các phần tử có một thuộc tính cụ thể với một giá trị cụ thể. Bộ chọn này được viết bằng dấu ngoặc vuông, bên trong là tên thuộc tính, theo sau là dấu bằng và giá trị mong muốn.

Ví dụ:

/* Chọn phần tử có thuộc tính "data-type" mang giá trị "important" */
[data-type="important"] {
   font-weight: bold;
}

Ví dụ về code:

HTML:

<p>This is a <span target="link">link</span> element.</p>
<p data-type="important">This is an important paragraph.</p>

CSS:

[target] {
   text-decoration: underline;
}
[data-type="important"] {
   color: red;
}

Các ví dụ này cho thấy cách bộ chọn thuộc tính CSS hoạt động: chọn phần tử dựa trên sự hiện diện hoặc giá trị chính xác của thuộc tính, rồi áp dụng kiểu tương ứng cho phần tử đó.

Thử thách

Dễ

Bạn được giao nhiệm vụ tạo kiểu cho một biểu mẫu HTML đơn giản bằng bộ chọn thuộc tính (attribute selector).

Áp dụng các kiểu sau bằng bộ chọn thuộc tính:

Thêm đường viền green cho các trường nhập liệu có thuộc tính type được đặt thành "text".
Đổi màu nền của các trường nhập liệu có thuộc tính type được đặt thành "email" thành lightblue.
Đặt màu chữ của các trường nhập liệu có thuộc tính type được đặt thành "password" thành red.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
<title>Styled Form</title>
<style>
    /* Apply styles to form fields based on attribute values */
</style>
</head>
<body>
<form>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name">
    
    <label for="email">Email:</label>
    <input type="email" name="email" id="email">
    
    <label for="password">Password:</label>
    <input type="password" name="password" id="password">
    
    <input type="submit" value="Submit">
</form>
</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ínhSự hiện diện và giá trị chính xácBộ 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ớp Bộ chọn ID Bộ 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