This page is In Progress

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

Attribute selector

Summary

Allows to select tags that has an attributes. While it can match the class and the id selector, its specificity value is lower.

Syntax

[sel=att] {...}

Parameters

  • sel: The name of a tag property
  • att: Must be either an Identifier or a String.
  • "=": An equality expression, one of
    • = Exactly equals,
    • ^= Begins with,
    • $= Ends with,
    • ~= Contains (with word boundary),
    • *= Contains (without word boundary)

Examples

The following style rule selects any element with an “attr” attribute whose value is exactly "Value".

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      .test          { display:none; }
      [attr="Value"] { display:block; }
    </style>
  </head>
  <body>
    <div class="test" attr="Value">Test for [=] (Value) succeeded.</div>
  </body>
</html>

Related specifications

Selectors Level 3
W3C Recommendation

See also

Related articles

CSS Attributes

Selectors

Attributions