Google News
logo
CSS Attribute Selectors
The CSS attribute selectors provides an easy and powerful way to apply the styles on HTML elements based on the presence of a particular attribute or attribute value.

CSS [attribute] Selector
The [attribute] selector that applies the style rules to an element if a given attribute exists.
<!DOCTYPE html>
<html>
<head>
<title>Attribute Selectors</title>
<style type="text/css">
a[target] {
    background-color: yellow;
}
</style>
</head>

<body>

<p>The target attribute gets a yellow background:</p>
<a href="http://www.freetimelearning.com" target="_blank">Target Link</a>
<p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>

</body>
</html>
Output :

The target attribute gets a yellow background:

Target Link

Note: For [attribute] to work in IE8 and earlier, a DOCTYPE must be declared.

CSS [attribute="value"] Selector
The [attribute="value"] selector matches any element whose attribute value is exactly equal to the given value.
<!DOCTYPE html>
<html>
<head>
<title>Attribute Selectors</title>
<style type="text/css">
   a[target=_blank] {
       background-color: yellow;
    }
</style>
</head>

<body>

<p>The target attribute gets a yellow background:</p>
<a href="http://www.freetimelearning.com" target="_blank">Click Here!</a>
<p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>

</body>
</html>
Output :

The target attribute gets a yellow background:

Click Here!

Note: For [attribute] to work in IE8 and earlier, a DOCTYPE must be declared.

CSS [attribute~="value"] Selector
The [attribute~="value"] selector matches any element whose attribute value is a list of space-separated values (like class="alert warning") , one of which is exactly equal to the specified value:
	
<!DOCTYPE html>
<html>
<head>
<title>Attribute Selectors</title>
<style type="text/css">
[title~=myimages] {
    border: 5px solid #0099da;
}
</style>
</head>
<body>
 
<p>All images with the title attribute containing the word "images" get a blue border.</p>
 
<img src="images/sample.jpg" title="Sample myimages" alt="Sample Image">
<img src="images/sample_11.jpg" title="Sample" alt="Sample Image">
<img src="images/sample_111.jpg" title="myimages" alt="Sample Image">
 
<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>
Output :

All images with the title attribute containing the word "images" get a blue border.

Sample Image Sample Image Sample Image

Note: For [attribute~=value] to work in IE8 and earlier, a DOCTYPE must be declared.

CSS [attribute|="value"] Selector
The [attribute|="value"] selector matches any element whose attribute has a hyphen-separated list of values beginning with the specified value.
<!DOCTYPE html>
<html>
<head>
<title>Attribute Selectors</title>
<style type="text/css">
[class|=top] {
    background:#0099da; color:#FFF;
}
</style>
</head>
<body>
<h1 class="top-header">Welcome FTL</h1>
<p class="top-text">Free Time Learning</p>
<p class="topcontent">Are you learning CSS?</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>
Output :

Welcome FTL

Free Time Learning

Are you learning CSS?

Note: For [attribute|=value] to work in IE8 and earlier, a DOCTYPE must be declared.

CSS [attribute^="value"] Selector
The [attribute^="value"] selector matches any element whose attribute value starts with a specified value. It does not have to be a whole word.
<!DOCTYPE html>
<html>
<head>
<title>Attribute Selectors</title>
<style type="text/css">
[class^="top"] {
    background: #0099da; color:#FFF;
}
</style>
</head>

<body>

<h1 class="top-header">Welcome FTL</h1>
<p class="top-text">Free Time Learning</p>
<p class="topcontent">Are you learning CSS?</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>
Output :

Welcome FTL

Free Time Learning

Are you learning CSS?

Note: For [attribute|=value] to work in IE8 and earlier, a DOCTYPE must be declared.

CSS [attribute$="value"] Selector
The [attribute$="value"] select all elements whose attribute value ends with a specified value. It does not have to be a whole word.
<!DOCTYPE html>
<html>
<head>
<title>Attribute Selectors</title>
<style type="text/css">
   [class$="test"] {
       background:#0099da; color:#FFF;
   }
</style>
</head>

<body>
 
<h4 class="mytest">This is Sample [Attribute Selector] Text.</h4>
<h4 class="my">This is Sample [Attribute Selector] Text.</h4>
<h4 class="my-test">This is Sample [Attribute Selector] Text.</h4>
 
</body>
</html>
Output :

This is Sample [Attribute Selector] Text.

This is Sample [Attribute Selector] Text.

This is Sample [Attribute Selector] Text.

CSS [attribute*="value"] Selector
The [attribute*="value"] selector matches all elements whose attribute value contains a specified value.
	
<!DOCTYPE html>
<html>
<head>
<title>Attribute Selectors</title>
<style type="text/css">
[class*="te"] {
    background:#0099da; color:#FFF; padding:7px 10px;
}
</style>
</head>

<body>

<h3 class="test">Sample [Attribute Selector] Text</h3>
<h3 class="test">Sample [Attribute Selector] Text</h3>
<h3 class="my">Sample [Attribute Selector] Text</h3>
<h3 class="test">Sample [Attribute Selector] Text</h3>
 
<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>
Output :

Sample [attribute*="value"] Text

Sample [attribute*="value"] Text

Sample [attribute*="value"] Text

Sample [attribute*="value"] Text

Note: For [attribute|=value] to work in IE8 and earlier, a DOCTYPE must be declared.