Hướng dẫn attribute selector trong css

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

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

attr-selector-example5.css

*[class|="top"] {
   border: 2px solid green;
   padding:3px;
}

attr-selector-example5.html

   
      
      
      
   
   
     
CSS [Attribute|="value"] Selector
     
*[class|="top"]
     
CSS Tutorial
     
CSS Selector Tutorial
     
....
     
Note: For [attribute|=value]
       to work in IE8 and earlier, a DOCTYPE must be declared.
   

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

CSS Tutorial
  
CSS Tutorial
  

CSS Selector Tutorial
  
CSS Selector Tutorial
  
....

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

attr-selector-example7.css

*[class^="top"] {
   border: 2px solid green;
   padding:3px;
}

attr-selector-example7.html

   
      
      
      
   
   
     
CSS [Attribute^="value"] Selector
     
*[class^="top"]
      
CSS Tutorial
      
CSS Selector Tutorial
      
....
     
Note: For [attribute^=value]
       to work in IE8 and earlier, a DOCTYPE must be declared.
   

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

CSS Tutorial
  
CSS Tutorial
  

CSS Selector Tutorial
  
CSS Selector Tutorial
  

....
 
....
  

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

   
      
      
      
   
   
     
CSS [Attribute$="value"] Selector
     
a[href$=".html"]
      

          
Java Tutorial
          
Java Chapter 1
          
CSS Tutorial
          
Other Tutorial
      
     
Note: For [attribute$=value]
       to work in IE8 and earlier, a DOCTYPE must be declared.
   

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

      
Java Tutorial
 
      
Java Tutorial
 
      
Java Chapter 1
      
CSS Tutorial
       
Other Tutorial

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ử có thuộc tính HREF chứa ".html".

attr-selector-example11.css

a[href*=".html"] {
   color: red;
   font-weight: bold;
}

attr-selector-example11.html

   
      
      
      
   
   
     
CSS [Attribute*="value"] Selector
     
a[href*=".html"]
      

          
Java Tutorial
          
Java Chapter 1
          
CSS Tutorial
          
Other Tutorial
      
     
Note: For [attribute*=value]
       to work in IE8 and earlier, a DOCTYPE must be declared.
   

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

      
Java Tutorial
 
      
Java Tutorial
 
      
Java Chapter 1
      
CSS Tutorial
       
Other Tutorial