Attribute Selector (CSS selector)
| IE7+ | FF1+ | Saf2+ | Op9.5+ |
|---|---|---|---|
| Buggy | Full | Full | Full |
| Version |
|---|
| CSS2 |
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
}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.
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".
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">.
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 hyphenated list of 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
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">.
Compatibility
| IE | 5.5 | None |
|---|---|---|
| 6.0 | None | |
| 7.0 | Buggy | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Buggy |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Buggy |
| 9.5 | Full |
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 2
and earlier versions, and Safari 2 and earlier versions, the selector
input[disabled=""] matches the element above.
In Opera 9.2, the selector
input[disabled="true"] matches the element
above. Internet Explorer 7 doesn’t seem to recognize attribute selectors
for minimized attributes at all.
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.
Safari versions up to and including 3 will always ignore the case of HTML attribute values, even for attributes that are, in fact, case sensitive.
Firefox versions up to and including
2, 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
- CSS3 Attribute Selectors
additional attribute selectors offered by CSS3
Footnotes
1 See also the :lang pseudo-class.
User-contributed notes
- ID:
- #3
- Date:
- Wed, 09 Apr 2008 04:19:57 GMT
- Status:
- This note has not yet been confirmed for accuracy and relevance.
Here's an interesting thing in IE7...
This selector should match a label "for" attribute with the value "foo":
label[for="foo"]
However in IE7 it doesn't match; however 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"]
element[className="whatever"]
- ID:
- #1
- 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"
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
