121

I'm trying to select the first h1 inside a div with a class called detail_container. It works if h1 is the first element within this div, but if it comes after this ul it won't work.

<style type="text/css">
.detail_container h1:first-child
{
color:blue;
} 
</style>
</head>
<body>
<div class="detail_container">
    <ul>
    <li></li>
    <li></li>
    </ul>
    <h1>First H1</h1>
    <h1>Second H1</h1>
</div>
</body>
</html>

I was under the impression that the CSS I have will select the first h1 no matter where it is in this div. How can I make it work?

Jeremy W
  • 1,889
  • 6
  • 29
  • 37
The Muffin Man
  • 19,585
  • 30
  • 119
  • 191

5 Answers5

279

The h1:first-child selector means

Select the first child of its parent
if and only if it's an h1 element.

The :first-child of the container here is the ul, and as such cannot satisfy h1:first-child.

There is CSS3's :first-of-type for your case:

.detail_container h1:first-of-type
{
    color: blue;
}

But with browser compatibility woes and whatnot, you're better off giving the first h1 a class, then targeting that class:

.detail_container h1.first
{
    color: blue;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 2
    I understand now, though I think they should have implemented both versions when they created the standard. – The Muffin Man Dec 22 '10 at 02:46
  • Not working in IE9 release. It says h1:unknown in developer tool – Cine Mar 17 '11 at 04:08
  • 11
    [Compatibility list](http://www.quirksmode.org/css/contents.html#t34) of `:first-of-type` selector. – Jess Telford Jan 30 '12 at 01:56
  • 5
    [Newer compatibility list](http://www.quirksmode.org/css/selectors/) of `:first-of-type`. Old link is incorrect. – BadHorsie Oct 01 '15 at 13:11
  • In my view, the term `:first-child` is not clear to understand, because you define the item as CSS selector, say `h1`, and then you subsequently think "take the first child" of all in the chosen DOM level. I used it wrong so many times... We have to get used to the `:first-of-type` selector and think of the *first child* of its type. – Avatar Jun 22 '17 at 10:23
  • You could also use this: ```.detail_container > h1:first-child``` and it will work – Israel Obanijesu Dec 18 '20 at 06:45
20

:first-child selects the first h1 if and only if it is the first child of its parent element. In your example, the ul is the first child of the div.

The name of the pseudo-class is somewhat misleading, but it's explained pretty clearly here in the spec.

jQuery's :first selector gives you what you're looking for. You can do this:

$('.detail_container h1:first').css("color", "blue");

Rob Sobers
  • 20,737
  • 24
  • 82
  • 111
9

For that particular case you can use:

.detail_container > ul + h1{ 
    color: blue; 
}

But if you need that same selector on many cases, you should have a class for those, like BoltClock said.

Grekz
  • 1,570
  • 15
  • 22
  • You shouldn't have any issues. Here the ref http://www.w3.org/TR/CSS2/selector.html#child-selectors – Grekz Sep 25 '12 at 23:27
8

you can also use

.detail_container h1:nth-of-type(1)

By changing the number 1 by any other number you can select any other h1 item.

laaposto
  • 11,835
  • 15
  • 54
  • 71
Fabrice
  • 161
  • 1
  • 8
2

You could wrap your h1 tags in another div and then the first one would be the first-child. That div doesn't even need styles. It's just a way to segregate those children.

<div class="h1-holder">
    <h1>Title 1</h1>
    <h1>Title 2</h1>
</div>
GhostToast
  • 477
  • 1
  • 6
  • 16