%%html
<style type="text/css">
.container .outer {
color: green;
}
.container .inner {
color: red;
}
.container > .outer {
color: blue;
}
.container > .inner {
color: cyan;
}
</style>
%%html
<div class="container">
<div class="outer">
<p>outer is direct descendant</p>
<div class="inner">
<p>inner is two levels down</p>
</div>
</div>
</div>
outer is direct descendant
inner is second level
Note how .container > .outer
supersedes .container .outer
because it is more explicit,
but .container > .inner
does not apply, because .inner
is not an immediate descendent of .container
.