How to target first instance on a page.

[RioBrewster]

I’m trying to target the first H1 on a page and make it all caps.

We have:

<main>
   <div class="breadcrumbs"></div>
   <div class="row">
       <div class="medium-8 small-12 columns">
            <p class="theme-header">...</p>
            <h1>title</h1>
             ...stuff...
           </div>
</div>
<aside class="medium-4 small-12 columns">
           ...stuff...
</aside>
<div class="row">
       <div class="medium-12 small-12 columns">
            <h1>Important Header</h1>
             ...stuff...
           </div>
</div>

:first-child doesn’t work because there’s stuff between the parent and the h1.

:first-of-type forces uppercase on both h1s because both is the first with regard to it’s parent.

I suppose I could just make a class to force the appropriate h1 to all uppercase, but where’s the fun in that? :^)

So is there a way to do this?

[Krish1980]

deleted

[Paulie_D]

I’m trying to target the first H1 on a page and make it all caps.

There is no CSS selector to do this as first/nth is based on the parent.

You need JS/JQ.

$( "h1" ).first().css( "text-transform", "uppercase" );

http://codepen.io/Paulie-D/pen/KVbwKQ

[Ij]

How about assigning a class to it and style to your heart’s content??

[RioBrewster]

I was hoping for something a tad more elegant.

And I’m concerned about coders forgetting to add the class. The fewer classes in the code the better.

I managed it with an adjacent selector. There’s a “wayfarer” feature that immediately precedes the h1 on every page.

[RioBrewster]

Thanks. But I think adding JS/jQ is even less elegant than a simple class.

I would never do anything in javascript that can be done in CSS/HTML.

[Author]

Posts