<html>
<head>
<title>css3: attribute selectors</title>
<style>
.test {color: green;display: none;}
.fail {color: red;}
[special] {display: block;}
[attr=”value”] {display: block;}
[attr^=”b”] {display: block;}
[attr$=”n”] {display: block;}
[attr*=”ai”] {display: block;}
[attr|=”en”] {display: block;}
[attr~=”two”] {display: block;}
[class=”fail”] {display: none;}
</style>
</head>
<body>
<h1>css3: attribute selectors</h1>
<h2>attribute selector tests</h2>
<div class=”test” special>1. test for [] (existence) succeeded.</div>
<div class=”test” attr=”value”>2. test for [=] (value) succeeded.</div>
<div class=”test” attr=”blue”>3. test for [^=] (prefix) succeeded.</div>
<div class=”test” attr=”green”>4. test for [$=] (suffix) succeeded.</div>
<div class=”test” attr=”contains”>5. test for [*=] (substring) succeeded.</div>
<div class=”test” attr=”en-us”>6. test for [|=] (hyphen) succeeded.</div>
<div class=”test” attr=”one two three”>7. test for [~=] (token) succeeded.</div>
<div class=”fail”>attribute selector tests failed.</div>
</body>
</html>
