jQuery selector with many classes not working

Question

<a class="control selected" id="control1" rel="1" href="#"></a>
<a class="control" id="control2" rel="2" href="#"></a>
<a class="control" id="control3" rel="3" href="#"></a>

I have a jQuery Slider that have thumbnails in a tags like this:

To make it dynamic, I try to select each

$('#control1.control').css("background-color", "red");
$('#control1.control.selected').css("background-color", "green");

The first selector works, but not the second.

http://jsfiddle.net/9mzfW/ -- seems like it works; there must be something else going on — Explosion Pills, Dec 06 '12 at 15:09
In this particular case, it would probably be better to add the CSS styles to your stylesheet and not use any jQuery at all. — Blazemonger, Dec 06 '12 at 15:15
@Blazemonger: I have to use jQuery while what I have to insert are dynamic images in css. Thanks — Bizboss, Dec 06 '12 at 15:17

score 1 · Answer 1 · edited May 23 '17 at 10:24

1

This should work,

$('#control1.control.selected').css("background-color", "green");

Here is explanation on other question, but yes, use single id in a query:

$('#control1')

edited May 23 '17 at 10:24

Community

1
1

answered Dec 06 '12 at 15:12

Davor Zubak

4,726
13
59
94

`$('.selected')` --> do you mean `$('#control1')`? – Cerbrus Dec 06 '12 at 15:19

score 0 · Accepted Answer · answered Dec 06 '12 at 18:47

Both selectors work. See I highlighted the first with red and the second with green colors:

<a class="control" id="control1" rel="1" href="#">1</a>
<a class="control selected" id="control2" rel="2" href="#">2</a>
<a class="control" id="control3" rel="3" href="#">3</a>
<script>
$('#control1.control').css("background-color", "red");
$('#control2.control.selected').css("background-color", "green");
</script>

jQuery selector with many classes not working

2 Answers2