mydomain
No ADS
No ADS

CSS Attribute Selector Tutorial with Examples

  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

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

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

No ADS
CSS [Attribute='value'] Selectoris 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

No ADS
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"] Selectorto 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

No ADS
CSS [Attribute|='value'] Selectoris 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

No ADS
CSS [Attribute^="value"] Selectoris 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

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

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

CSS Tutorials

Show More
No ADS
No ADS

Newest Articles

Show More
No ADS