3

I want to match the first H1 element in my whole document. However, right now I'm faced with a problem.

I'm using the following CSS selector:

h1:first-child {
...
}

However, it matches several H1 tags on the page. How can I make it match only the first one?

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
Mathias Lykkegaard Lorenzen
  • 15,031
  • 23
  • 100
  • 187
  • 2
    Can you show your HTML? A http://jsfiddle.net/ demo would also help. The most likely answer is `#containingElement > h1:first-child`. – thirtydot Feb 24 '12 at 23:07
  • Works fine for me in Chrome http://jsfiddle.net/C2r2R/. Try `body > h1:first-child {}` if you don't have a parent div. – ngen Feb 24 '12 at 23:09
  • @ngen but if you have nested `h1` within other `div` they will be also considered the `first-child` of such `div`s and the css rule will be applied to them – JFK Feb 24 '12 at 23:30

4 Answers4

5

There is no such selector; all available selectors can only match siblings, not the order of elements of the same name across multiple parents. Your selector would be very brittle anyways.

Instead, simply markup the first h1 with an appropriate class, or match its structure. For example, you might want to match

body>header:first-child>h1

instead.

phihag
  • 278,196
  • 72
  • 453
  • 469
3

That is because the selector does now look at the entire document, it looks at the parent. Any time an <h1> is the first child of any element, it will match to that selector. If you only want it to apply to one single <h1> in a document, considering giving it a separate class or ID, or selecting it more specifically based on where you expect it to appear.

For example, on my site I separate each chunk of text into a <div class="box"> which are all present in the <body> of the document. So if I wanted to match only the first <h1> in the document, I could do something like this:

body > .box:first-child > h1:first-of-type { }

This would select the first box only, and then match the first <h1> in that box, simulating the "first <h1> in the document" effect (assuming the first box has an <h1>, which on my website is always true if one exists). I assume you wanted to use the :first-of-type selector here, because the first <h1> in a document doesn't necessarily have to be the first child of a parent.

animuson
  • 53,861
  • 28
  • 137
  • 147
2

are you allowed to cheat with jQuery? some times jQuery (javascript) provide(s) elegant alternatives beyond the html and css limitations 

$(document).ready(function() {
 $('body').find('h1:first').css('color','#0000ff');
}); //  ready
JFK
  • 40,963
  • 31
  • 133
  • 306
  • I don't get why this was voted down once. It ended up being my solution. Thanks a bunch. – Mathias Lykkegaard Lorenzen Feb 25 '12 at 00:22
  • 2
    @Mathias: Probably because the question didn't ask for a jQuery solution, even though the solution is perfectly valid. – animuson Feb 25 '12 at 00:22
  • I provided this as an alternative solution since it doesn't seem to exist a "css-only" possible solution (unless somebody proves me wrong). At the end, what it matters here is to help regardless the up votes or down votes. I am glad it worked for you. Thanks. – JFK Feb 25 '12 at 00:33
  • There *might* be a CSS solution, but it's impossible to know without seeing the HTML. – thirtydot Feb 25 '12 at 00:49
0

That will match every h1 that is the first child of its immediate parent. so if you have like

<div>
  <h1></h1>
</div>
<div>
  <h1></h1>
</div>

both of those h1 tags are first-children.

Try h1:first

Alexander Corwin
  • 1,097
  • 6
  • 11