​x
 
1
<!DOCTYPE html>
2
<title>Example</title>
3
<style>
4
    article > pre {
5
        font-size: 1.4em;
6
        color: limegreen;
7
        background: beige;
8
    }
9
</style>
10
​
11
<article>
12
    <h1>Child combinator example</h1>
13
    <pre>Here's some
14
        preformatted text
15
    </pre>
16
​
17
    <aside>
18
    <pre>Here's some
19
        preformatted text
20
    </pre>
21
    </aside>
22
​
23
    <pre>Here's some
24
        preformatted text
25
    </pre>
26
</article>
27
​
28
<p>The child combinator matches the first and third instance of preformatted text, because they are children of the <code>article</code> element. The second instance does not match, because its not a child of the <code>article</code> element (its a child of the <code>aside</code> element).</p>