Target specific instance of CSS class

Question

Is there any way for me to target the third div is this list and apply a new CSS class to it?

With CSS, JS or jQuery if possible. (or anything else anyone can think of)

<div class="item"><p>TEST TEST</p></div>
<div class="item"><p>TEST TEST</p></div>
<div class="item"><p>TEST TEST</p></div>
<div class="item"><p>TEST TEST</p></div>
<div class="item"><p>TEST TEST</p></div>
<div class="item"><p>TEST TEST</p></div>

“With JS or jQuery if possible” is a strange requirement. Pure CSS solutions are inferior, then? — Jukka K. Korpela, Sep 19 '13 at 11:06
You should require a pure-css approach, only if it's cross-browser, if it's not then a javascript one if possible, or using any library that you are / will use in that project — aleation, Sep 19 '13 at 11:20
Something I can think of to solve this with is with a CSS-Book. But it requires reading. Also searching could help. But it requires searching. — hakre, Sep 19 '13 at 11:37
possible duplicate of: [nth-child doesn't respond to class selector](http://stackoverflow.com/q/3203313/367456) and most likely a lot of other ones. — hakre, Sep 19 '13 at 11:39

score 5 · Answer 1 · answered Sep 19 '13 at 11:01

5

There is no such thing as a CSS class. CSS has selectors. One type of selector is the class selector. HTML has classes.

You can combine any number of selectors you like. It sounds like you want the nth-child psuedo-class selector.

.item:nth-child(3) { }

answered Sep 19 '13 at 11:01

Quentin

914,110
126
1,211
1,335

score 4 · Answer 2 · answered Sep 19 '13 at 11:05

There is no such thing as “CSS class”, still less instances thereof. What you want is to target the third one among div elements that belong to a certain class (which is assigned to it in HTML markup).

The answer is that this depends on the surrounding context. There is no way to target the desired element without knowing how this sequence of div elements is nested within other elements and what elements (especially div elements may appear before it).

If we assume, for example, that these elements constitute the content of an element like <div class=foo>...</div>, then it’s simple:

.foo > :nth-child(3) { /* CSS declarations here */ }

The :nth-child() pseudo-class isn’t supported by some old versions of IE, though.

score 4 · Answer 3 · answered Sep 19 '13 at 11:07

4

Pure JavaScript solution

You can use getElementsByClassName:

// Gets the third element with the class "item"
element = document.getElementsByClassName("item")[2];
// Assigns a new class to it
element.setAttribute("class", "newclass");

answered Sep 19 '13 at 11:07

Butt4cak3

2,389
15
15

Good answer. When the pure JS solution is this simple, why use jQuery? :) – IsisCode Sep 19 '13 at 11:49
1

@IsisCode Because people tend to think that jQuery is the solution to everything. They rather include a giant library to to achieve simple things than have an additional line of code here and there. I know, it's sad... – Butt4cak3 Sep 19 '13 at 11:50

Mr. Alien · Answer 4 · 2013-09-19T11:09:28.940

3

If you want a CSS solution than you can do it like

div.item:nth-of-type(3) {
   /* Target 3rd div */
}

This won't add a class but will target 3rd div

Demo

I don't know what downvotes are for, but also make sure you bind these elements inside a wrapper element say div having class for example wrapper so the selector will be

div.wrapper > div.item:nth-of-type(3) {
   /* Styles here */
}

edited Sep 19 '13 at 11:09

answered Sep 19 '13 at 11:00

Mr. Alien

153,751
34
298
278

1

LOL -1 for my answer? Reason please – Mr. Alien Sep 19 '13 at 11:04
@Daft I don't care if I get downvotes, but I want the reason for downvoting too as I suggested this solution first and rest all of them suggested the same thing, but don't know whats wrong with my answer, anyways you welcome :) – Mr. Alien Sep 19 '13 at 11:11
1

I didn't downvote, but I guess that it's because that approach wouldn't work on IE versions lower than 9, which would make a good poin... – aleation Sep 19 '13 at 11:14
@aleation http://selectivizr.com/ :) and he tagged this as css and js, so I provided an alternative, it's upto op to choose which one he wants to go for, may be this will be helpful to other users – Mr. Alien Sep 19 '13 at 11:14
But some people (like me XD) don't like to be loading libraries for this kind of stuff, when you can use standard and crossbrowser approaches, That's why I gave him a javascript approach instead of a jQuery one – aleation Sep 19 '13 at 11:18
@aleation **I provided an alternative** – Mr. Alien Sep 19 '13 at 11:26
is the nth-of-type(x) which wouldn't work on older browsers, again, I don't downvote normally, and didn't on your answer xD – aleation Sep 19 '13 at 11:28
@aleation shhh, cool down, I didn't said you down voted, the thing is we have different approaches, so posting correct answer but a different approach is not a WRONG answer, so I told you that this is an alternative, anyone can go for this whoever likes to.. there is nothing bad in doing so, and if 1 library can save your from writing jquery for each such thing, I would prefer that, whoever downvotes should downvote on wrong answers, not on correct ones, p.s even I hardly down vote :) and you can see quentins answer, we have the same thing..do you see the difference? – Mr. Alien Sep 19 '13 at 11:31
I know what you mean, it's just that the non-crossbrowser approaches are not very welcome normally, also, if he's willing to use jQuery, I guess it's better to use jQuery rather than adding another library when jQuery can do that in a cross-browser way – aleation Sep 19 '13 at 11:35

Benoit Blanchon · Accepted Answer · 2013-09-19T11:13:46.463

3

With jQuery:

$("div.item:eq(2)").addClass("test");

Demo

edited Sep 19 '13 at 11:13

answered Sep 19 '13 at 11:02

Benoit Blanchon

13,364
4
73
81

3

jQuery is not a solution for everything, he is asking for CSS either JS – Mr. Alien Sep 19 '13 at 11:03
3

No no, jQuery is OK too. I'll try this now... – Daft Sep 19 '13 at 11:04
To target the `
` instead: `$("div.item:eq(2) p").addClass("test");`
– Benoit Blanchon Sep 19 '13 at 11:42

score 3 · Answer 6 · answered Sep 19 '13 at 11:11

With plain JS:

var items = document.getElementsByClassName("item");
myItem = items[2]; // as the first element is 0, third element is position 2 in the array;
myItem.setAttribute('class', 'myClass');

a shorter way would be:

document.getElementsByClassName('item')[2].setAttribute('class', 'myClass');

You have to be careful with this method and the others, because if there are other things on page with the class "item" it will count as well, the best you can do is to wrap all those divs inside a parent div, give that parent div an ID or something, and target the parent div instead.

Nice one-liner, also, good advice. – IsisCode Sep 19 '13 at 11:58 — IsisCode, Sep 19 '13 at 11:58

Idan Wender · Answer 7 · 2013-09-19T12:12:16.087

2

Use JQuery for find class 'item' with css selectors ask for the 3 one and add class:

$('.item:nth-of-type(3)').addClass('new-class');

edited Sep 19 '13 at 12:12

answered Sep 19 '13 at 11:07

Idan Wender

977
8
10

score 1 · Answer 8 · answered Sep 19 '13 at 11:26

For marku up like this-

 <div id="div1" class="someclass">
        <img ... id="image1" name="image1" />
    </div>

You can do this in javascript-

var d = document.getElementById("div1");
d.className = d.className + " otherclass";

And can use addClass method in jQuery.

Target specific instance of CSS class

8 Answers8