Css - how to select the first of type on page

Question

Most of my pages have H2's and obviously an H1.

The H2's can be inside divs/articles/sections etc - in other words there is no guaranteed structure.

Here's a typical scenario:

<h1></h1>
<section>
    <h2>I want this one</h2>
    <p></p>
</section>
<section>
    <h2>But not this one</h2>
    <p></p>
</section>

I want a selector that always guarantees the first occurance on the page - in this case the first H2 wherever it maybe.

I've taken a look and tried the first-of-type selector but found that it applies to its own container, so every H2 is selected here because it is the first within its parent section tag.

Surely in 2015, we are able to do this.

Answer 1

Use jquery. Honestly i tried css only methods, but failed. Excellent question btw.

<script>
$(document).ready(function(){
$( "h2:first" ).css( "color", "red" );
});

</script>

Answer 2

you could simply use the css selector first-of-type

Definition and Usage The :first-of-type selector matches every element that is the first child, of a particular type, of its parent.

Tip: This is the same as :nth-of-type(1).

h2:first-of-type {
    color: red;
}

or as a jQuery solution:

$('h2').first().css('color','red');