nth-child beginning from middle of the html

Question

I may have random html......

<div>
<p></p>
<p></p>
....
<h1></h1>
<h1></h1>
...
<p></p>
<p></p>
....
</div>

Now, I want to count to heading as first second third etc child. For eg. if I set h1:first-child{} then it will not select as in the above example because it's not in first position of div.

So, how can I style assuming nth-child(1) for first h1 nth-child(2) for second h2 etc?

Answer 1

You're looking for the :nth-of-type pseudo-class. h1:nth-of-type(5) will match the fifth h1 element, regardless of where it is.