​x
 
1
<!DOCTYPE html>
2
<title>Example</title>
3
<style>
4
    h1 ~ pre {
5
        font-size: 1.4em;
6
        color: limegreen;
7
        background: beige;
8
    }
9
</style>
10
​
11
<article>
12
    <h1>General sibling 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
<p>The first and third instances of preformatted text share the same parent (<code>article</code>) as the <code>h1</code> heading. The second instance doesn't share the same parent (its parent is the <code>aside</code> element), and therefore, the styles don't apply to it.</p>