Hướng dẫn và ví dụ CSS Attribute Selector
Xem thêm các chuyên mục:

Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.


CSS Attribute Selector giúp bạn lựa chọn các phần tử dựa trên giá trị của thuộc tính đã cho.
CSS Attribute Selector là một trong các CSS Selector cơ bản, nhưng nó bao gồm nhiều nội dung vì vậy tôi viết về nó trong một bài viết riêng biệt. Các CSS Selector cơ bản khác bạn có thể xem tại bài viết dưới đây:
CSS [Attribute] Selector giúp bạn tìm kiếm các phần tử có thuộc tính (attribute) được chỉ định, và không cần quan tâm tới giá trị của thuộc tính này.
Ví dụ, tìm kiếm tất cả các phần tử <a> có thuộc tính target (không cần quan tâm tới giá trị của thuộc tính này).
attr-selector-example1.css
a[target] {
background-color: yellow;
}
attr-selector-example1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>CSS [Attribute] Selector</title>
<link rel="stylesheet" type="text/css" href="attr-selector-example1.css" />
</head>
<body>
<h3>CSS [Attribute] Selector</h3>
<ul>
<li><a href="#" target="_blank">HTML Tutorial</a></li>
<li><a href="#" target="_self">CSS Tutorial</a></li>
<li><a href="#">Other Tutorial</a></li>
</ul>
</body>
</html>
CSS [Attribute='value'] Selector được sử dụng để tìm kiếm các phần tử mà giá trị của thuộc tính khớp hoàn toàn với giá trị cho trước. Selector này là "Không phân biệt chữ hoa chữ thường" (Case-insensitive).
Ví dụ, tìm kiếm các phần tử <a> có giá trị thuộc tính Target là "_blank". Không phân biệt chữ hoa chữ thường (Case-insensitive).
[target="_blank"] | |
Target | OK? |
_blank | ![]() |
_Blank | ![]() |
_BLANK | ![]() |
_Self |
attr-selector-example13.css
a[target="_blank"] {
background-color: yellow;
}
attr-selector-example13.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>CSS [Attribute="value"] Selector</title>
<link rel="stylesheet" type="text/css" href="attr-selector-example13.css" />
</head>
<body>
<h3>CSS [Attribute="value"] Selector</h3>
<p>a[target="_blank"]</p>
<ul>
<li><a href="#" target="_blank">HTML Tutorial</a></li>
<li><a href="#" target="_BLANK">Javascript Tutorial</a></li>
<li><a href="#" target="_self">CSS Tutorial</a></li>
<li><a href="#">Other Tutorial</a></li>
</ul>
<p><b>Note:</b> For [<i>attribute</i>=<i>value</i>]
to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
CSS [Attribute~='value'] Selector được sử dụng để tìm kiếm các phần tử mà giá trị của thuộc tính chứa một từ được chỉ định. Selector này là "phân biệt chữ hoa chữ thường" (Case-sensitive).
Ví dụ, tìm tất cả các phần tử <img> có thuộc tính title chứa từ "cat". Chú ý: Từ "cats" trong trường hợp này là không phù hợp, bởi vì "cat" và "cats" là 2 từ khác nhau.
[title~="cat"] | |
title | OK? |
Cute baby cats | |
A Black cat | ![]() |
A Black Cat | |
A Black cat(2) | |
A Black cat-3 | |
A White Cat | |
Tiger (Belong to the cat family) | ![]() |
attr-selector-example3.css
img[title~="cat"] {
border: 2px solid green;
padding:3px;
}
img {
margin: 5px;
}
attr-selector-example3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>CSS [Attribute~="value"] Selector</title>
<link rel="stylesheet" type="text/css" href="attr-selector-example3.css" />
</head>
<body>
<h3>CSS [Attribute~="value"] Selector</h3>
<p>img[title~="cat"]</p>
<img src="pic-cat1.png" title="Cute baby cats"/>
<img src="pic-cat2.png" title="A Black cat"/>
<img src="pic-tiger1.png" title="Tiger (Belong to the cat family)"/>
<img src="pic-deer1.png" title="A deer stands intently" />
</body>
</html>
Nếu bạn muốn CSS [Attribute~="value"] Selector là "không phân biệt chữ hoa chữ thường" (Case-insensitive), bạn có thể sử dụng cú pháp của CSS4:
/** Syntax: */
[Attribute~="value" i]
/** Example: */
img[title~="cat" i] {
border: 2px solid green;
padding:3px;
}
<img src="pic-cat1.png" title="Cute baby cats"/>
<img src="pic-cat2.png" title="A Black Cat"/> <!-- OK -->
<img src="pic-tiger1.png" title="Tiger (Belong to the cat family)"/> <!-- OK -->
<img src="pic-deer1.png" title="A deer stands intently" />
CSS [Attribute|='value'] Selector được sử dụng để tìm kiếm các phần tử mà giá trị của thuộc tính phù hợp hoàn toàn với giá trị cho trước, hoặc bắt đầu với giá trị cho trước và theo ngay sau là dấu trừ ( - ). Selector này là "phân biệt chữ hoa chữ thường" (Case-sensitive).
Ví dụ, tìm kiếm các phần tử mà giá trị của thuộc tính Class là "top" hoặc bắt đầu với "top-".
[class|="top"] | |
class | OK? |
top | ![]() |
Top | |
top-text | ![]() |
top-content | ![]() |
left-text top-text |
attr-selector-example5.css
*[class|="top"] {
border: 2px solid green;
padding:3px;
}
attr-selector-example5.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>CSS [Attribute|="value"] Selector</title>
<link rel="stylesheet" type="text/css" href="attr-selector-example5.css" />
</head>
<body>
<h3>CSS [Attribute|="value"] Selector</h3>
<p>*[class|="top"]</p>
<h1 class="top">CSS Tutorial</h1>
<p class="top-text">CSS Selector Tutorial</p>
<p class="topcontent">....</p>
<p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>]
to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
Nếu bạn muốn CSS [Attribute|="value"] Selector "không phân biệt chữ hoa chữ thường" (Case-insensitive), bạn có thể sử dụng cú pháp của CSS4:
/** Syntax: */
[Attribute|="value" i]
/** Example: */
img[class|="top" i] {
border: 2px solid green;
padding:3px;
}
<h1 class="top">CSS Tutorial</h1> <!-- OK -->
<h1 class="Top">CSS Tutorial</h1> <!-- OK -->
<p class="top-text">CSS Selector Tutorial</p> <!-- OK -->
<p class="TOP-text">CSS Selector Tutorial</p> <!-- OK -->
<p class="topcontent">....</p>
CSS [Attribute^="value"] Selector được sử dụng để tìm kiếm các phần tử mà giá trị của thuộc tính bắt đầu với một giá trị cho trước. Selector này là "phân biệt chữ hoa chữ thường" (Case-sensitive).
Ví dụ, tìm kiếm các phần tử mà giá trị của thuộc tính Class hoặc bắt đầu với "top".
[class^="top"] | |
class | OK? |
top | ![]() |
Top | |
top-text | ![]() |
top-content | ![]() |
topcontent | ![]() |
left-text top-text |
attr-selector-example7.css
*[class^="top"] {
border: 2px solid green;
padding:3px;
}
attr-selector-example7.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>CSS [Attribute^="value"] Selector</title>
<link rel="stylesheet" type="text/css" href="attr-selector-example7.css" />
</head>
<body>
<h3>CSS [Attribute^="value"] Selector</h3>
<p>*[class^="top"]</p>
<h1 class="top">CSS Tutorial</h1>
<p class="top-text">CSS Selector Tutorial</p>
<p class="topcontent">....</p>
<p><b>Note:</b> For [<i>attribute</i>^=<i>value</i>]
to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
Nếu bạn muốn CSS [Attribute^="value"] Selector "không phân biệt chữ hoa chữ thường" (Case-insensitive), bạn có thể sử dụng cú pháp của CSS4:
/** Syntax: */
[Attribute^="value" i]
/** Example: */
img[class^="top" i] {
border: 2px solid green;
padding:3px;
}
<h1 class="top">CSS Tutorial</h1> <!-- OK -->
<h1 class="Top">CSS Tutorial</h1> <!-- OK -->
<p class="top-text">CSS Selector Tutorial</p> <!-- OK -->
<p class="TOP-text">CSS Selector Tutorial</p> <!-- OK -->
<p class="topcontent">....</p> <!-- OK -->
<p class="footer top">....</p>
CSS [Attribute$="value"] Selector được sử dụng để tìm kiếm các phần tử mà giá trị của thuộc tính kết thúc bởi một giá trị cho trước. Selector này là "phân biệt chữ hoa chữ thường" (Case-sensitive).
Ví dụ, tìm kiếm các phần tử <a> mà giá trị của thuộc tính HREF kết thúc bởi ".html".
[href^=".html"] | |
href | OK? |
http://abc.com/java-tutorial.html | ![]() |
http://abc.com/java-tutorial.Html | |
http://abc.com/java-tutorial.html#chapter1 | |
http://cde.com/css.jsp |
attr-selector-example9.css
a[href$=".html"] {
color: red;
font-weight: bold;
}
attr-selector-example9.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>CSS [Attribute$="value"] Selector</title>
<link rel="stylesheet" type="text/css" href="attr-selector-example9.css" />
</head>
<body>
<h3>CSS [Attribute$="value"] Selector</h3>
<p>a[href$=".html"]</p>
<ul>
<li><a href="http://abc.com/java-tutorial.html">Java Tutorial</a></li>
<li><a href="http://abc.com/java-tutorial.html#chapter1">Java Chapter 1</a></li>
<li><a href="http://cde.com/css.jsp">CSS Tutorial</a></li>
<li><a href="http://other.com/tutorial">Other Tutorial</a></li>
</ul>
<p><b>Note:</b> For [<i>attribute</i>$=<i>value</i>]
to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
Nếu bạn muốn CSS [Attribute$="value"] Selector "không phân biệt chữ hoa chữ thường" (Case-insensitive), bạn có thể sử dụng cú pháp của CSS4:
/** Syntax: */
[Attribute$="value" i]
/** Example: */
img[href$="html" i] {
color:red;
font-weight: bold;
}
<ul>
<li><a href="http://abc.com/java-tutorial.html">Java Tutorial</a></li> <!-- OK -->
<li><a href="http://abc.com/java-tutorial.Html">Java Tutorial</a></li> <!-- OK -->
<li><a href="http://abc.com/java-tutorial.html#chapter1">Java Chapter 1</a></li>
<li><a href="http://cde.com/css.jsp">CSS Tutorial</a></li>
<li><a href="http://other.com/tutorial">Other Tutorial</a></li>
</ul>
CSS [Attribute*="value"] Selector được sử dụng để tìm kiếm các phần tử mà giá trị của thuộc tính chứa một giá trị cho trước. Selector này là "phân biệt chữ hoa chữ thường" (Case-sensitive).
Ví dụ, tìm tất cả các phần tử <a> có thuộc tính HREF chứa ".html".
[href*=".html"] | |
href | OK? |
http://abc.com/java-tutorial.html | ![]() |
http://abc.com/java-tutorial.Html | |
http://abc.com/java-tutorial.html#chapter1 | ![]() |
http://cde.com/css.jsp |
attr-selector-example11.css
a[href*=".html"] {
color: red;
font-weight: bold;
}
attr-selector-example11.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>CSS [Attribute*="value"] Selector</title>
<link rel="stylesheet" type="text/css" href="attr-selector-example11.css" />
</head>
<body>
<h3>CSS [Attribute*="value"] Selector</h3>
<p>a[href*=".html"]</p>
<ul>
<li><a href="http://abc.com/java-tutorial.html">Java Tutorial</a></li>
<li><a href="http://abc.com/java-tutorial.html#chapter1">Java Chapter 1</a></li>
<li><a href="http://cde.com/css.jsp">CSS Tutorial</a></li>
<li><a href="http://other.com/tutorial">Other Tutorial</a></li>
</ul>
<p><b>Note:</b> For [<i>attribute</i>*=<i>value</i>]
to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html>
Nếu bạn muốn CSS [Attribute*="value"] Selector "không phân biệt chữ hoa chữ thường" (Case-insensitive), bạn có thể sử dụng cú pháp của CSS4:
/** Syntax: */
[Attribute*="value" i]
/** Example: */
img[href*="html" i] {
color:red;
font-weight: bold;
}
<ul>
<li><a href="http://abc.com/java-tutorial.html">Java Tutorial</a></li> <!-- OK -->
<li><a href="http://abc.com/java-tutorial.Html">Java Tutorial</a></li> <!-- OK -->
<li><a href="http://abc.com/java-tutorial.html#chapter1">Java Chapter 1</a></li>
<li><a href="http://cde.com/css.jsp">CSS Tutorial</a></li>
<li><a href="http://other.com/tutorial">Other Tutorial</a></li>
</ul>