CSS [attr=value] Selector

What is CSS [attr=value] Selector?

CSS [attr=value] Selector matches all elements whose have attr attribute with value same as "value".
Select every element whose have exactly same attribute with value.

Syntax

This syntax apply to select every element whose have attr attribute with value same as "value".

[attr=value] {
  property: value;
  property: value;
  ...
}

Example

Select all element whose have href attributes and value exactly "#" to apply CSS style.

<!DOCTYPE html>
<html>
<head>
  <title>CSS [attr=value] 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>

Run it...   »

Syntax

This syntax apply to select every element whose have multiple attribute with "value".

[attr=value][attr=value] {
  property: value;
  property: value;
  ...
}

Example

Select all element whose have href attributes with value exactly "#" class attributes with value exactly "demo" to apply CSS style.

<!DOCTYPE html>
<html>
<head>
  <title>CSS [attr=value] Selector</title>
  <style type="text/css">
    a[href="#"][class="demo"] {
      color:#ff0000;
    }
  </style>
</head>
<body>
  <a href="http://www.google.com" class="demo">Google</a>
  <a href="#">Way2Tutorial</a>
  <a href="#" class="demo">HTML</a>
</body>
</html>

Run it...   »

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.