Hướng dẫn sử dụng CSS Attribute Selector

Xem thêm các chuyên mục:

1- CSS Attribute Selector

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:

2- CSS [Attribute] Selector

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>

3- CSS [Attribute='value'] Selector

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"_blank". Không phân biệt chữ hoa chữ thường (Case-insensitive).
[target="_blank"]
Target OK?
_blank 16x16
_Blank 16x16
_BLANK 16x16
_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>

4- CSS [Attribute~='value'] Selector

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""cats" là 2 từ khác nhau.
[title~="cat"]
title OK?
Cute baby cats  
A Black cat 16x16
A Black Cat  
A Black cat(2)  
A Black cat-3  
A White Cat  
Tiger (Belong to the cat family) 16x16
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" />

5- CSS [Attribute|='value'] Selector

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"top" hoặc bắt đầu với "top-".
[class|="top"]
class OK?
top 16x16
Top  
top-text 16x16
top-content 16x16
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>

6- CSS [Attribute^='value'] Selector

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 16x16
Top  
top-text 16x16
top-content 16x16
topcontent 16x16
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>  
 

7- CSS [Attribute$='value'] Selector

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 16x16
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>
 

8- CSS [Attribute*='value'] Selector

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 16x16
http://abc.com/java-tutorial.Html  
http://abc.com/java-tutorial.html#chapter1 16x16
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>

Xem thêm các chuyên mục: