So, I have bumped into the following problem. I'm trying to give the "heading" all a different color using `nth-child`.

My HTML looks like this:

```
<header>
    <h1>Title<br />
    <span>Subtitle</span></h1>

    <p><strong>Heading</strong><br />
    text</p>
    <p><strong>Heading</strong><br />
    text</p>
    <p><strong>Heading</strong><br />
    text</p>
</header>

```

And my CSS looks like this:

```
header h1 {
    font-size: 4em;
    line-height: .65em;
}
header h1 span {
    font-size: .5em;
}
header p {
    font-size: .9em;
}
header p strong {
    font-size: 1.1em;
}
header p:nth-child(1) strong { color: #f3b200; }
header p:nth-child(2) strong { color: #d27b26; }
header p:nth-child(3) strong { color: #dc572e; }

```

Without the `<h1>`, it works perfectly, check this [**Fiddle**](http://jsfiddle.net/LRWXd/2/).

But with the `<h1>`, it seems to see the `<h1>` as a `<p>`. Making the last "heading" not having a color. Check the [**Fiddle**](http://jsfiddle.net/LRWXd/1/).

I don't understand why this happens.