css selectors - Css - how to select the first of type on page -

this question has answer here:

most of pages have h2's , h1.

the h2's can inside divs/articles/sections etc - in other words there no guaranteed structure.

here's typical scenario:

<h1></h1> <section>     <h2>i want one</h2>     <p></p> </section> <section>     <h2>but not one</h2>     <p></p> </section>

i want selector guarantees first occurance on page - in case first h2 wherever maybe.

i've taken , tried first-of-type selector found applies own container, every h2 selected here because first within parent section tag.

surely in 2015, able this.

use jquery. tried css methods, failed. excellent question btw.

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

Ruby Code