Bộ chọn [attribute~="value"] được dùng để chọn các phần tử có giá trị thuộc tính chứa từ chỉ định. "value" phải là một từ riêng biệt trong thuộc tính. Nó không phải là một phần của từ khác. Ví dụ: nếu [title~=Geeks] được chỉ định, các phần tử có title Geeks sẽ được chọn.
Syntax:
[attribute~=value] {
// CSS property
}Example 1: Trong ví dụ này, bộ chọn CSS [class~="Geeks"] nhắm mục tiêu các phần tử. Các phần tử này có thuộc tính class chứa từ "Geeks". Nó áp dụng màu nền xanh lá cây và màu chữ trắng.
<!DOCTYPE html>
<html>
<head>
<style>
[class~="Geeks"] {
background: green;
color: white;
}
</style>
</head>
<body style="text-align:center;">
<div class="Geeks Class">
First div Element
</div>
<div class="GeeksforGeeks">
Second div Element
</div>
<div class="My Geeks">
Third div Element
</div>
<div class="MyGeeks">
Fourth div Element
</div>
</body>
</html>
Output:
Example 2: Trong ví dụ này, bộ chọn CSS [class~=Geeks] nhắm mục tiêu các phần tử. Các phần tử này có thuộc tính class chứa từ "Geeks". Nó áp dụng một đường viền màu xanh lam liền nét.
<!DOCTYPE html>
<html>
<head>
<title>
CSS [attribute~=value] Selector
</title>
<style>
[class~=Geeks] {
border: 5px solid blue;
}
</style>
</head>
<body>
<h2 style="text-align:center">
[attribute~=value] Selector
</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
class="Geeks Class"
alt="gfg">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"
class="Geeks"
alt="geeks">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-10.png"
class="GeeksforGeeks"
alt="gfg">
</body>
</html>
Output:
Supported Browsers: Các trình duyệt được hỗ trợ bởi [attribute~=value] selector được liệt kê dưới đây:
- Google Chrome 4.0
- Internet Explorer 7.0
- Firefox 2.0
- Safari 3.1
- Opera 9.6