Selecting Elements by Attribute
Description
The attribute selector allows you to match attributes based on different aspects of attributes.
The Element Attribute Selector has following format.
[condition] or elementType[condition]
Condition
You can create conditions to match attributes.
- [attr]
Selects elements that define the attribute attr, regardless of the value.
CSS Level 2 - [attr="val"]
Selects elements that define attr and whose value is val.
CSS Level 2 - [attr^="val"]
Selects elements that define attr and whose value starts with the string val.
CSS Level 3 - [attr$="val"]
Selects elements that define attr and whose value ends with the string val.
CSS Level 3 - [attr*="val"]
Selects elements that define attr and whose value contains the string val.
CSS Level 3 - [attr~="val"]
Selects elements that define attr and whose value contains multiple values, one of which is val.
CSS Level 2 - [attr|="val"]
Selects elements that define attr and whose value is a hyphen-separated list of values, the first of which is val.
CSS Level 2
Example
The following code uses the Element Attribute Selector.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
[href] {<!-- w ww. j av a 2 s . c om-->
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a id="anchor" class="class1 class2" href="http://java2s.com">
Visit the website </a>
<p>This is a test.</p>
<a id="w3canchor" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
The code above used the attribute selector, which matches any
element that has an href attribute, regardless of its value.
Example 2
The ~= condition is for attributes that support multiple values separated
by a space character, such as the class global attribute.
The following code uses Selecting Based on One of Multiple Values.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
[class~="class2"] {
border: thin black solid;
padding: 4px;
}<!-- w ww . j a v a2 s . c o m-->
</style>
</head>
<body>
<a id="anchor" class="class1 class2" href="http://java2s.com">
Visit the website </a>
<p>
This is a <span class="class2">test</span>.
</p>
<a id="w3canchor" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
The code above used the class global attribute.
The condition used in the selector is to match elements who define the class attribute
and whose value for this attribute includes class2.
Example 3
The |= condition is good for attribute value separated by hyphens.
The following code shows how uses the |= attribute condition to select all of the English tags, without having to enumerate all of the regional variations.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
[lang|="en"] {<!--from w ww . ja v a 2 s . c o m-->
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a lang="en-us" id="anchor" class="class1 class2"
href="http://java2s.com"> Visit the website </a>
<p>
This is <span lang="en-gb" class="class2">a</span> test.
</p>
<a lang="en" id="w3canchor" href="http://w3c.org">Visit the W3C
website</a>
</body>
</html>