CSS3 Attribute Selectors (CSS selector)

Spec
Version
CSS3
Browser support (more…)
IE7+ FF3+ SA1.3+ OP9.5+ CH2+
Buggy Full Full Full Full

Syntax

[attribute { ^= | $= | *= } attribute value] {
declaration block
}

Description

CSS3 defines three more attribute selector variations. These new selectors give us the ability to make partial matches to attribute values—we can match strings at the start, end, or anywhere within an attribute value.

We can use the ^= operator to cause an attribute selector to match elements that have an attribute containing a value that starts with the specified value:

a[href^="http:"] {
  ⋮ declarations
}

This example matches a elements that have an href attribute value which starts with the characters "http:".

Using the $= operator, an attribute selector can match elements that have an attribute which contains a value ending with the specified value:

img[src$=".png"] {
  ⋮ declarations
}

This example matches img elements with a src attribute value that ends with the characters ".png".

Finally, we can use the *= operator to make an attribute selector match elements that have an attribute which contains the specified value:

div[id*="foo"] {
  ⋮ declarations
}

This example matches div elements whose id attribute value contains the characters "foo".

Example

This example will match a elements with an href attribute that contains the string "example.com":

a[href*="example.com"] {
  ⋮ declarations
}

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
None None Buggy Buggy Buggy Buggy Buggy Full Full Full Full Full Full Buggy Full Full Full

In Internet Explorer 7:

  • The style attribute can't be used in attribute selectors.
  • An attribute selector can’t match an element when that element has an invalid value in the specified attribute.
  • If the closing square bracket of an attribute selector, ], is immediately followed by an element type selector, the rule is parsed as if there’s a descendant combinator—that is, a space—between the selectors, instead of failing as it should.
  • Some DOM attributes, such as className, are treated like HTML attributes. For example the following selector should match a label for attribute with the value "foo": label[for="foo"].

    However in IE7 it doesn't match; while this does match: label[htmlFor="foo"]. “htmlFor” is the DOM property name associated with the for attribute (because “for” is a reserved word, it cannot be used as a property name). The same thing is true in the DOM for class, which is called "className", however interestingly, *both* of these work in IE7: element[class="whatever"] or element[className="whatever"].

In Internet Explorer version 8 an attribute selector that matches colspan or rowspan attributes for th or td elements will in fact match all th or td elements (source James Hopkins) .

Safari versions up to and including 4 will always ignore the case of HTML attribute values, even for attributes that are, in fact, case sensitive.

Firefox versions up to and including 3.5, will ignore the case of some attributes that should be compared in a case-sensitive manner: for example, the id and for attributes.

User-contributed notes

ID:
#6
Contributed:
by Louis Lazaris
Date:
Mon, 01 Nov 2010 09:24:39 GMT

In the compatibility descriptions, for IE7 it says:

"The style attribute can't be used in attribute selectors."

This seems to be a general statement about attribute selector support in IE7, and according to my tests, it is correct. Thus, that line should also be present in the article "Attribute Selector" found at:

http://reference.sitepoint.com/css/attributeselector

Not just in this one that discusses CSS3 attribute selectors. I don't see any mention of that IE7 issue on that other page.

Related Products