nth-child style not applied

Question

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.

But with the <h1>, it seems to see the <h1> as a <p>. Making the last "heading" not having a color. Check the Fiddle.

I don't understand why this happens.

Answer 1

Because if nth-child didn't found the nth number of element matching p element, so it will fail, use nth-of-type instead

header p:nth-of-type(1) strong { color: #f3b200; }
header p:nth-of-type(2) strong { color: #d27b26; }
header p:nth-of-type(3) strong { color: #dc572e; }

Demo