background: lightyellow;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<title>Descendant Selectors</title>
<style type='text/css'>
body {
font-face: sans-serif;
}
h1 {
margin: 5px;
}
p {
border: 1px solid rgb(200, 200, 200);
background: rgb(234, 234, 234);
padding: 5px;
margin: 5px;
}
p.note {
background: yellow;
border: 1px solid gold;
}
span.code {
font-family: monospace;
padding: 0 10px;
}
p span.code {
background: yellow;
}
p.note span.code {
background: lightyellow;
}
</style>
</head>
<body>
<p>
Descendant selectors apply styles based on ancestral relationships.
<span class='code'><span></span> element named <em>code</em>,
which is a descendant of <span class='code'><p></span> elements.
To do this, the selector <span class='code'>p span.code</span> is used.
</p>
<p class='note'>
The note text is given different styles. To do this another descendant
selector is used. This time the selector is <span class='code'>p.note
span.code</span>
</p>
</body>
</html>