Hướng dẫn và ví dụ CSS Attribute Selector

CSS Attribute Selector
CSS [Attribute] Selector
CSS [Attribute='value'] Selector
CSS [Attribute~='value'] Selector
CSS [Attribute|='value'] Selector
CSS [Attribute^='value'] Selector
CSS [Attribute$='value'] Selector
CSS [Attribute*='value'] Selector

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:

Hướng dẫn và ví dụ CSS Selectors cơ bản

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

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" 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" />

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

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

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