<html>
<head>
<title>Selector test</title>
<style>
#foo #bar #baz {
background-color: lime;
}
.abc .def div {
background-color: white;
border-style: solid;
border-width: 1;
border-color: lime;
}
div > .boo > .bee {
background-color: black;
color: magenta;
}
#gen_sib ~ div,
#adj_sib + div {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div id="foo">
<div id="bar">
<div id="baz">
I should have a green background.
</div>
</div>
</div>
<div class="abc">
<div class="def">
<div>hello</div>
<div>hello</div>
<div>hello</div>
</div>
</div>
<div>
<div class="boo">
<div class="bee">Spooky!</div>
</div>
</div>
<div>
<div class="boo">
<div>
<div class="bee">
Not spooky!
</div>
</div>
</div>
</div>
<div>
<div id="gen_sib">All the siblings of this <div> should be blue.</div>
<div>First sibling (should be blue)</div>
<div>Second sibling (should be blue)</div>
</div>
<div>
<div id="adj_sib">The first sibling of this <div> should be blue.</div>
<div>First sibling (should be blue)</div>
<div>Second sibling (should not be blue)</div>
</div>
</body>
</html>
