1

Say i have this markup:

<div class='current'>
</div>
<div class='current'>
</div>
<div class='current'>
</div>
<div class='current'>
</div>
<div class='current'>
</div>

Now these divs are not necessarily next to each other in the markup, but could be spread throughout the page.

Can i target only the first occurrence of class "current" using CSS only, i'd ideally like to avoid using javascript (for now)?

Ie. 

.current:first-child {
background: red;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
benhowdle89
  • 36,900
  • 69
  • 202
  • 331

5 Answers5

7

I believe you're looking for something like this:

.current:nth-child(1){
    background:red;
}

Should do the trick!

rgubby
  • 1,251
  • 10
  • 8
  • 3
    Uhhh, how is `:nth-child(1)` different from `:first-child`, besides the fact that the former doesn't work on IE7 and IE8 while the latter does? – BoltClock Jul 11 '11 at 12:06
  • I have added the test with :first-child - http://www.webdevout.net/test?019 Works great. – spliter Jul 11 '11 at 12:14
6

:first-child targets elements that are first children, not first occurrence of a given class. So this will target all elements with current class, that are first children. It can be all of them if they are in different places on a page or none at all.

It sounds like you may be looking for css3 selector first-of-type

Litek
  • 4,888
  • 1
  • 24
  • 28
5

As mentioned in these two answers (along with this new one), CSS3 doesn't bake in a pseudo-class that selects the first element of its class (unlike :first-of-type which selects by type).

You can always use :first-child if .current is guaranteed to be the first child of .group:

.group .current:first-child {
    background: red;
}

But if it's not guaranteed to be, then based on your comments and the answer link, since they all share the same parent you can do this instead:

.group .current {
    background: red;
}

.group .current ~ .current {
    background: transparent; /* Or whatever your default is */
}

The general sibling combinator ~ ignores other elements that may not be .current. All these rules work in IE7+.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • as metioned in the comment above, I have added the test page with :first-child at http://www.webdevout.net/test?019 and it shows that you can select the first .current even without all of the .current being placed within the same parent or any particular order. Am I missing something? – spliter Jul 11 '11 at 12:22
  • @spliter: The one that's highlighted is the first child of `html body ul li` so it gets matched. If you move the `ul` elsewhere, that `div` would still be matched. – BoltClock Jul 11 '11 at 12:24
  • You are absolutely right, @BoltClock. Tried that and indeed, the test was not very accurate in this case. Thanks for the explanation. – spliter Jul 11 '11 at 12:30
1

If they are spread throughout the page, you can not get what you need with pure CSS solution. Even with first-of-type unless the elements are on the same DOM level. Check the example to see that you can not select the elements.

On the other hand once I move the third .current to the same DOM level where I already have the second one, I get only the second item selected, as it's the first .current on this level.

On the other hand it's a very short one-liner in JS

Don't overcomplicate things ;)

spliter
  • 12,321
  • 4
  • 33
  • 36
0

If it's spread throughout the page, you can't target it with css.

Jayne Mast
  • 1,427
  • 1
  • 16
  • 32