o7planning

CSS Attribute Selector Tutorial with Examples

View more Tutorials:

  1. CSS Attribute Selector
  2. CSS [Attribute] Selector
  3. CSS [Attribute='value'] Selector
  4. CSS [Attribute~='value'] Selector
  5. CSS [Attribute|='value'] Selector
  6. CSS [Attribute^='value'] Selector
  7. CSS [Attribute$='value'] Selector
  8. CSS [Attribute*='value'] Selector
Follow us on our fanpages to receive notifications every time there are new articles. Facebook Twitter

1- CSS Attribute Selector

CSS Attribute Selector helps you select the elements based on the value of the given attribute.
CSS Attribute Selector is one of the basic CSS Selectors, but it includes a lot of content. Thus, I have already written about it in another article. You can also check out other basic CSS Selectors in the following article:

2- CSS [Attribute] Selector

CSS [Attribute] Selector helps you search for the elements with the specified attribute regardless of the value of the attribute.
For example, go search all the <a> elements with the target attribute (regardless of the value of this attribute).
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 is used to search for the elements whose attribute value exactly matches the given value. This selector is "Case-insensitive".
For example, go search for the <a> elements whose Target attribute value is "_blank". 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 is used to search for elements whose attribute value contains a specified word. This selector is "Case-sensitive".
For example, find every <img> element whose the title attribute contains the word "cat". Note: In this case, the word "cats" is out of place, because "cat" and "cats" are oviously two different words.
[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>
Therefore, if you want the CSS [Attribute~="value"] Selector to be "Case-insensitive", you will use the syntax of 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 ​​​​​​​is used to search for elements whose attribute value perfectly matches the given value, or starts with the given value and right follows the minus (-). This selector is "Case-sensitive".
For example, find the elements whose value of the Class attribute is "top" or starts with "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>
If you want CSS [Attribute|="value"] Selector to be "Case-insensitive", you can use the syntax of 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 is used to search for the elements whose attribute value starts with a given value. This selector is "Case-sensitive".
For example, find the elements whose value is of the Class attribute, or begins with "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>
If you want CSS [Attribute^="value"] Selector to be "Case-insensitive", you can use the syntax of 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 is used to search for the elements whose attribute value starts with a given value. This selector is "Case-sensitive".
For example, search for the <a> elements whose value of the HREF attribute ends with ".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>
If you want CSS [Attribute$="value"] Selector to be "Case-insensitive", you can use the syntax of 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 is used to search for the elements whose attribute value contains the given value. This selector is "Case-sensitive".
For example, search for every <a> element whose value of the HREF contains ".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>
If you want CSS [Attribute*="value"] Selector to be "Case-insensitive", you can use the syntax of 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>

View more Tutorials:

Maybe you are interested

These are online courses outside the o7planning website that we introduced, which may include free or discounted courses.