CSS attr Selector - CSS attribute Selector
What is CSS att Selector?
CSS att Selector matches all elements whose have attr attribute.
Attribute value whatever no concern only select matches attribute element.
Syntax
This syntax apply to select element whose have attr attribute.
[attr] {
property: value;
property: value;
...
}
Example
Select all element whose have href attributes to apply CSS style.
<!DOCTYPE html>
<html>
<head>
<title>CSS attr Selector</title>
<style type="text/css">
a[href] {
color:#ff0000;
}
</style>
</head>
<body>
<a href="http://www.google.com">Google</a>
<a href="http://www.way2tutorial.com">Way2Tutorial</a>
<a href="#">HTML</a>
</body>
</html>
Example
In this example select all element whose have class attribute.
<!DOCTYPE html>
<html>
<head>
<title>CSS attr Selector</title>
<style type="text/css">
p[class] {
color: #ff0000;
}
</style>
</head>
<body>
<p class="one">This is first paragraph.</p>
<p class="two">This is another paragraph.</p>
</body>
</html>
Browser Compatibility
- Google Chrome 2+
- Mozilla Firefox 3+
- Internet Explorer 9+
- Opera 9.5+
- Safari 1.3+
Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.