<!doctype html>
<html>
<head>
<title>CSS attribute selector test</title>
<style type="text/css">
div {
background-color: red;
}
div[exists],
div[exactMatch=" foobarbaz "],
div[containsWord~=go],
div[containsString*=barb],
div[startsWithSegment|=foo],
div[startsWithString^=foobar-b],
div[endsWithString$=ar-baz] {
background-color: lime;
}
</style>
</head>
<body>
<h1>These should be green:</h1>
<div exists>HasAttribute</div>
<div exactMatch=" foobarbaz ">ExactMatch</div>
<div containsWord="words go here">ContainsWord</div>
<div containsString="foobarbaz">ContainsString</div>
<div startsWithSegment="foo-bar-baz">StartsWithSegment</div>
<div startsWithString="foobar-baz">StartsWithString</div>
<div endsWithString="foobar-baz">EndsWithString</div>
<h1>These should be red:</h1>
<div doesntexist>HasAttribute</div>
<div exactMatch="foobarbaz">ExactMatch</div>
<div containsWord="words exist here">ContainsWord</div>
<div containsString="foobar baz">ContainsString</div>
<div startsWithSegment="fool-bar-baz">StartsWithSegment</div>
<div startsWithString="fooba-r-baz">StartsWithString</div>
<div endsWithString="fooba-r-baz">EndsWithString</div>
</body>
</html>
