CSS attribute selectors are *cool*

2007-12-29 @ 18:00#

wow! never knew that CSS 2.x supported setting styles based on the *value* of an attribute of an element (attribute selectors)!

<!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>attribute-selectors</title>
		<style type="text/css">
			/* has a title attribute */
			a[title]	
			{
				background-color:yellow;
			}
			/* has a title attribute set to "test" */
			a[title="test"] 
			{
				background-color:olive;
			}
			/* has a title attribute that contains "test" */
			a[title~="test"]	
			{
				background-color:lime;
			}
			/* has a title attribute that contains "test" or "test-" */
			a[title|="test"]
			{
				background-color:aqua;
			}
			/* has a title attribute that contains "link" or "link-" */
			a[title|="link"]
			{
				background-color:silver;
			}
		</style>
	</head>
	<body>
		<h1>attribute-selectors</h1>
		<ul>
			<li>
				<a title="ext">ext</a>
			</li>
			<li>
				<a title="test">test</a>
			</li>
			<li>
				<a title="test link">test link</a>
			</li>
			<li>
				<a title="test-link">test-link</a>
			</li>
			<li>
				<a title="link-test">link-test</a>
			</li>
		</ul>
	</body>
</html>

code