Attribute selectors
Attribute selectors are used to style elements that have a particular attribute or values. That means it target the element based on attribute or values. The use of css attribute selectors is fairly limited because they have been supported only in the latest versions of browsers. Following are some of commonly used attribute selectors and sample codes.
Presence of an attribute
This one check whether the attribute is specified in the element, doesn`t matter what the value given to the attribute is:
p[class] {color: #FF0066;}
In the above css code any < p > element with attribute “class” to change the color to #FF0066.
<html>
<head>
<style type="text/css">
.textcolor {
color: #FF0066;
}
p[class] {
font-size:20pt;
}
</style>
</head>
<body>
<p> Simple attribute selector sample</p>
<p class="textcolor"> This paragraph has attribute class</p>
<p> Next paragraph</p>
</body>
</html>
In the above css code the attribute selector find attribute name “class” exist in p element and if exist it change the font size.
Output:
The value of an attribute
You can style the elements with its attribute values.
a[href="http://www.corelangs.com/default.html"] { font-size:20pt; }
In the above code the style changes according to its attribute value. If any href attribute with its value “http://www.corelangs.com/default.html” will change the font size.
<html>
<head>
<style type="text/css">
a[href="http://www.corelangs.com/default.html"] { font-size:20pt; }
</style>
</head>
<body>
<a href="http://www.corelangs.com/about.html">About</a> <br>
<a href="http://www.corelangs.com/default.html">Corelangs.Com</a> <br>
<a href="http://www.corelangs.com/sitemap.html">Sitemap</a>
</body>
</html>
output
Style based on Partial Attribute Values
Taking the advantage of attribute selectors , you can style an element by based on whether a particular word contain anywhere inside attribute value, appears at the beginning of an attribute`s value, at the end of an attribute`s value or contains as a substring in the attribute value.
Word Matching
If any attribute that have a space separated list of words , you can style that element based on the presence of any one of those words.
attribute~="value"
Source
<html>
<head>
<style type="text/css">
.bigfont{
font-size:50pt;
}
.myredclass{
color: red;
}
.blueclass{
color: blue;
}
.green{
color: green;
}
h1[class~="bigfont"] { font-style: italic; }
</style>
</head>
<body>
<h1 class="myredclass">Red</h1>
<h1 class="blueclass bigfont" >Blue</h1>
<h1 class="green" >Green</h1>
</body>
</html>
output
Contains substring
You can style an element by select its substring from its attribute vale.
attribute*="value"
Source Code
<html>
<head>
<style type="text/css">
.myredclass{
color: red;
}
.blueclass{
color: blue;
}
.green{
color: green;
}
h1[class*="green"] { font-style: italic; }
</style>
</head>
<body>
<h1 class="myredclass">Red</h1>
<h1 class="blueclass" >Blue</h1>
<h1 class="greenclass" >Green</h1>
</body>
</html>
output
Start With
Check the attribute value is start with given word.
Source Code
output
End With
Check the attribute value is end with given word.
attribute$="value"
Source Code
<html>
<head>
<style type="text/css">
.myredclass{
color: red;
}
.blueclass{
color: blue;
}
.green{
color: green;
}
h1[class$="class"] { font-style: italic; }
</style>
</head>
<body>
<h1 class="myredclass">Red</h1>
<h1 class="blueclass" >Blue</h1>
<h1 class="green" >Green</h1>
</body>
</html>
output
In the above image, you can see Red and Blue are in Italics style because these two classes end with the word “class”.