I took this example from w3-schools (see the [link](http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_firstchild)). If I define my `p:first-child` to have a yellow background like this:

```
<!DOCTYPE html>
<html>
<head>
    <style>
        p:first-child {
            background-color:yellow;
        }
    </style>
</head>

<body>
    <p>This paragraph is the first child of its parent (body).</p>

    <h1>Welcome to My Homepage</h1>
    <p>This paragraph is not the first child of its parent.</p>

    <div>
        <p>This paragraph is the first child of its parent (div).</p>
        <p>This paragraph is not the first child of its parent.</p>
    </div>

</body>
</html>

```

Everything works fine and `<p>This paragraph is the first child of its parent (body).</p>` as well as `<p>This paragraph is the first child of its parent (div).</p>`get the yellow background.

But when I then add a headline right before the first `p` element, like this:

```
...
<body>

    <h1>test</h1>
    <p>This paragraph is the first child of its parent (body).</p>
...

```

.. the `<p>This paragraph is the first child of its parent (body).</p>` no longer gets the yellow background.

Why? I applied the CSS style to all of the first `p` elements. When I add a headline, the `p` element after this is, obviously, still the first `p` element. Why doesn't it work then?