Trong CSS, bộ chọn [attribute=value] dùng để chọn các phần tử có giá trị thuộc tính bằng "value".
Cú pháp:
element [attribute = "value"] {
// CSS Property
}Lưu ý: <!DOCTYPE> phải được khai báo cho IE8 và các phiên bản trước.
Ví dụ 1: Trong ví dụ này, bộ chọn h1[id="geeks"] nhắm mục tiêu phần tử h1 có id="geeks". Nó áp dụng màu nền xanh lá cây và màu chữ trắng. Bộ chọn li[class="gfg"] nhắm mục tiêu các phần tử li có class="gfg". Nó đặt màu chữ thành xanh lá cây.
html<!DOCTYPE html>
<html>
<head>
<!-- CSS property used here -->
<style>
h1[id="geeks"] {
background-color: green;
color: white;
}
li[class="gfg"] {
color: green;
}
</style>
</head>
<body>
<h1 id="geeks">GeeksforGeeks</h1>
<ul>
<li class="gfg">Data Structure</li>
<li class="geeks">Algorithm</li>
<li class="gfg">DBMS</li>
<li class="geeks">C++ programming</li>
</ul>
</body>
</html>
Đầu ra:
Ví dụ 2: Trong ví dụ này, bộ chọn CSS p[this=Geeks] nhắm mục tiêu các phần tử <p> với thuộc tính this="Geeks". Nó áp dụng màu nền xanh lá cây và màu chữ trắng.
<!DOCTYPE html>
<html>
<head>
<title>
CSS [attribute=value] Selector
</title>
<!-- CSS property -->
<style>
p[this=Geeks] {
background-color: green;
color: white;
}
</style>
</head>
<body>
<h2>[attribute=value] Selector</h2>
<p this="Geeks">Paragraph 1</p>
<p this="geeks">Paragraph 2</p>
<p this="Geeks">Paragraph 2</p>
</body>
</html>
Đầu ra:
Trình duyệt được hỗ trợ:
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari