Attribute Selector (CSS selector)

Spec
Version
CSS2
Browser support (more…)
IE7+ FF1+ SA1.3+ OP9.2+ CH2+
Buggy Buggy Buggy Buggy Buggy

Syntax

[ { attribute | attribute { = | |= | ~= } attribute value } ] {
declaration block
}

Description

An attribute selector will match elements on the basis of either the presence of an attribute, or the exact or partial match of an attribute value. Attribute selectors were introduced in CSS2, and CSS3 added a few more.

Attribute selectors are delimited by square brackets; the simplest form of an attribute selector consists of an attribute name surrounded by square brackets:

[href] {
  ⋮ declarations
}

This example selector matches any element that has an href attribute. It also contains an implied universal selector, and is equivalent to *[href].

Here’s another example:

a[href] {
  ⋮ declarations
}

This selector matches any a element that has an href attribute, so it matches a hypertext link, but not a named anchor.

Attribute selectors can also specify a value, or a partial value, to match. The values must be strings, in which case they’re surrounded by single or double quotes, or identifiers, without quotes. All the examples below use strings.

Tip: Case Sensitivity

The value specified in an attribute selector is case sensitive if the attribute value in the markup language is case sensitive. Thus, values for id and class attributes in HTML are case sensitive, while values for lang and type attributes are not.

XHTML, when served as XML, is always case sensitive; see Differences Between HTML and XHTML for more on this.

It’s not always easy to remember which HTML attributes are case sensitive and which aren’t. It’s usually best to assume that everything is case sensitive, but don’t rely on it!

We can use the = operator to have an attribute selector match elements that have specific values:

input[type="submit"] {
  ⋮ declarations
}

This selector matches any input element that has a type attribute with a value equal to "submit".

CAUTION: Default Attributes

Attribute selectors can only match attributes and values that exist in the document tree, and there’s no guarantee that a default value specified in a DTD (or similar) can be matched. For instance, in HTML, the default value for a form element’s method attribute is "get", but you can’t rely on a selector like form[method="get"] to select a form element with the start tag <form action="comment.php">.

Important: Attribute Selectors for IDs

Note that [id="foo"] isn’t equivalent to #foo. Although both selectors would match the same element in HTML, there’s a significant difference between their levels of specificity.

We can use the |= operator to cause an attribute selector to match elements which have an attribute containing a list of hyphenated words that begin with a specific value:

[hreflang|="en"] {
  ⋮ declarations
}

This example selector matches any element that has an hreflang attribute containing a value of "en", whether or not that value is followed by a hyphen and more characters. In other words, it matches hreflang attribute values of "en", "en-US", "en-GB", and so on. This selector syntax was intended to allow language subcode matches.1

Note: Hyphen or No Hyphen?

All supporting browsers allow a hyphen to appear in the value in a selector like [hreflang|="en"]. It’s unclear whether or not this is illegal, because the CSS specification doesn’t contains any guidelines to help us deal with this situation.

We can use the ~= operator to make an attribute selector match elements that have an attribute that contains a list of space-separated words, one of which is the specified value:

[class~="warning"] {
  ⋮ declarations
}

This selector matches any HTML element with a class attribute that contains a space-separated list of words, one of which is "warning". So it matches <p class="warning"> and <strong class="important warning"> and <div class="warning highlight">, but not <p class="my-warning"> or <ul class="warnings">.

Example

This selector matches all input elements with a type attribute that’s equal to "submit" (in other words, submit buttons):

input[type="submit"] {
  ⋮ 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 Buggy Buggy Buggy Buggy Buggy Buggy Buggy Buggy Buggy Buggy

Browsers differ in their treatment of minimized attributes in HTML. For example, the following HTML input element has a minimized disabled attribute:

<input type="text" name="email" disabled>

The selector input[disabled="disabled"] should match the element above, and represents the correct way to write the selector. However, most browsers fail to match it correctly:

  • In Firefox 3.5 and earlier versions, Safari 4 and earlier versions, Chrome 3 and earlier, and Opera 10.1and earlier; the selectors input[disabled=""], input[disabled="disabled"] and input[disabled] all match the element above. All four of the above browsers behave as if there was an attribute name without a value. This appears to be wrong, even though all four do it.
  • In Opera 9.2, the selector input[disabled="true"] matches the element above.
  • Internet Explorer 7 only seems to match the above element using input[disabled] and will not match the selector input[disabled="disabled"] to the non minimised version (i.e.<input type="text" name="email" disabled=”disabled”>).
  • Internet Explorer 8 matches the element above with input[disabled="disabled"] and input[disabled].

In Internet Explorer 7:

  • 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.

In this Section

Footnotes

1 See also the :lang pseudo-class.

User-contributed notes

ID:
#15
Contributed:
by discarnateEntity
Date:
Thu, 27 Jan 2011 02:49:11 GMT

In IE8, a style attribute selector's value must conform to the following rules, or it will never match anything:

- CSS properties must be in all uppercase.
- CSS values must be in all lowercase.
- Each colon and semicolon must be followed by a space.
- The last CSS value cannot have a closing semicolon.

The actual spacing and capitalization used in the inline style declaration is irrelevant.

To illustrate, the tag

<div style="width:9px;height:9px;">

SHOULD be matched by the selectors

[style="width:9px;height:9px;"]
[style$="px;"]
[style^="wid"]

but in IE8, you would have to use these instead:

[style="WIDTH: 9px; HEIGHT: 9px"]
[style$="px"]
[style^="WID"]

Firefox 3.6 misbehaves in a similar manner to IE8 wrt colons and semicolons, in that it requires them to be followed by spaces.

ID:
#13
Contributed:
by Louis Lazaris
Date:
Mon, 01 Nov 2010 09:27:28 GMT

According to the other article on CSS3 attribute selectors found at:

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

the "style" attribute cannot be targeted in IE7 using attribute selectors. Shouldn't this be mentioned here too?

ID:
#12
Contributed:
by Louis Lazaris
Date:
Mon, 01 Nov 2010 08:30:38 GMT

In the box "Hyphen or No Hyphen?" it says:

"...because the CSS specification doesn't contains any guidelines..."

which should read:

"...because the CSS specification doesn't contain any guidelines..."

which corrects the modifying verb ("contains" becomes "contain").

ID:
#7
Contributed:
by Louis Lazaris
Date:
Wed, 10 Feb 2010 09:59:41 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

Not sure if this is a mistake or not, but regarding the section that says:

"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."

I've tested the case sensitivity of the attribute selector in relation to the "for" and "id" attributes in Firefox 3.57 and it seems to work fine (i.e. it compares in a case-sensitive manner), whereas case is blatantly ignored in Firefox 2. So, I'm not sure if this was an error intending to target Firefox up to version 2 in this instance, or if Firefox fixed the problem in 3.57 as compared to 3.5.

ID:
#5
Contributed:
by YuriKolovsky
Date:
Sat, 29 Aug 2009 21:27:48 GMT

would love to see some more simple examples of tag[attribute] especially for tables, because this selector has more potential than meets the eye.

ID:
#1
Contributed:
by kstrieby
Date:
Thu, 06 Dec 2007 02:19:18 GMT

"This selector matches any a element that has an href attribute, so it’ll match a hypertext link, but not a named anchor."

"it'll" = contraction of "it will". My technical writing coaches have always stressed "use active verbs in the present tense" because it means you use fewer words and get greater clarity.

Suggested re-write: "This selector matches any a element that has an href attribute, so it matches a hypertext link, but not a named anchor."

A similar quibble with this:

"In Firefox 2 and earlier versions, and Safari 2 and earlier versions, the selector input[disabled=""] will match the element above. In Opera 9.2, the selector input[disabled="true"] will match the element above. Internet Explorer 7 doesn’t seem to recognize attribute selectors for minimized attributes at all."

I humbly suggest to remove the word "will" and just say "matches"

Related Products