ansaurus

Question

CSS selector for first element with class

Answer 1

+2 A:

The first-child selector is intended, like the name says, to select the first child of a parent tag. The children have to be embedded in the same parent tag. Your exact example will work (Just tried it here):

<body>
    <p class="red">first</p>
    <div class="red">second</div>
</body>

Maybe you have nested your tags in different parent tags? Are your tags of class red really the first tags under the parent?

Notice also that this doesnt only apply to the first such tag in the whole document, but everytime a new parent is wrapped around it, like:

<div>
    <p class="red">first</p>
    <div class="red">second</div>
</div>
<div>
    <p class="red">third</p>
    <div class="red">fourth</div>
</div>

first and third will be red then.

Update:

I dont know why martyn deleted his answer, but he had the solution, the nth-of-type selector:

<html>
<head>
<style type="text/css">
.red:nth-of-type(1)
{
    border:5px solid red;
} 
</style>
</head>

<body>
    <div class="home">
        <span>blah</span>
        <p class="red">first</p>
        <p class="red">second</p>
        <p class="red">third</p>
        <p class="red">fourth</p>
    </div>
</body>
</html>

Credits to Martyn. More infos for example here. Be aware that this is a CSS 3 selector, therefore not all browsers will recognize it (e.g. IE8 or older).

Philip Daubmeier 2010-04-26 22:58:02

Doesn't have to be of the same tag type, but must have the same parent.

Chetan Sastry 2010-04-26 23:01:01

Thank's for the correction Philip.

John Weldon 2010-04-26 23:03:14

Yeah, just tried it out here: http://www.w3schools.com/css/tryit.asp?filename=trycss_first-child1 and noticed the same. Youre right.

Philip Daubmeier 2010-04-26 23:03:49

Corrected my answer.

Philip Daubmeier 2010-04-26 23:06:20

It might have been my fault - as I'd pointed out to Martyn that a CSS3 selector like `:nth-of-type` suffer the slight problem of not working at all in any current version of IE.

Már Örlygsson 2010-04-26 23:23:17

the nth-of-type rule is the right fix. thanks

Rajat 2010-04-26 23:24:15

@Már Örlygsson: Oh I see. But that may be even the case with the `first-child` selector... And even if it works with the current IE, it doesnt mean it works with older ones, that are still used by many people.

Philip Daubmeier 2010-04-26 23:24:28

`:first-child` - while not solving Rajat's problem - does in fact work in both IE7 and IE8.

Már Örlygsson 2010-04-26 23:25:26

@Már Örlygsson: Really? That surprises me :) But then there are still IE6 users out there. You see you cant please everyone... :)

Philip Daubmeier 2010-04-26 23:27:00

I know it doesn't work in IE coz its CSS3 but i wanted to understand why it wasn't working for me. was just playing around :)

Rajat 2010-04-26 23:29:14

To hack one's way towards IE support, one might consider (if only during a brief flash of utter madness) experiment using `expression()` syntax. Something along the lines of this untested pile of crazy: `.red { behaviour: expression(window.firstRed||(this.style.border='5px solid red');window.firstRed=true;this.runtimeStyle.behaviour='none'); }` :-)

Már Örlygsson 2010-04-26 23:31:42

Answer 2

+1 A:

To match your selector, the element must have a class name of red and must be the first child of its parent.

<div>
    <span class="red"> <!-- MATCH -->
</div>

<div>
    <span>Blah</span>
    <p class="red"> <!-- NO MATCH -->
</div>

<div>
    <span>Blah</span>
    <div><p class="red"></div> <!-- MATCH -->
</div>

Chetan Sastry 2010-04-26 23:04:16

this is correct and this seems to be my problem but is there a way to select the first element with a class irrespective of whether its preceeded by other elements ?

Rajat 2010-04-26 23:12:24

If you had looked at Martyns answer you had not have to ask this :)

Philip Daubmeier 2010-04-26 23:14:35

Answer 3

A:

Since the other answers cover what's wrong with it, I'll try the other half, how to fix it. Unfortunately, I don't know that you have a CSS only solution here, at least not that I can think of. There are some other options though....

1) Assign a first class to the element when you generate it, like this:

<p class="red first"></p>
<div class="red"></div>

CSS:

.first.red {
  border:5px solid red;
}

This CSS only matches elements with both first and red classes.

2) Alternatively, do the same in javascript, for example here's what jQuery you would use to do this, using the same CSS as above:

$(".red:first").addClass("first");

Nick Craver 2010-04-26 23:13:51

ansaurus

tags:

views:

answers:

CSS selector for first element with class

related questions