189

I've got some links that I want to select class and id at the same time.

This is because I've got 2 different behaviours. When a class of links got one class name they behave in one way, when the same clas of links got another class name they behave differently. The class names are switch with jquery.

So I have to be able to select a links class AND id at the same time. Is this possible?

I've tried:

 $("a .save #country")

without any result.

6 Answers 6

337

You can do:

$("#country.save")...

OR

$("a#country.save")...

OR

$("a.save#country")...

as you prefer.

So yes you can specify a selector that has to match ID and class (and potentially tag name and anything else you want to throw in).

2
  • 44
    So basically its like : $("#a .b") means element with class b inside element with id a. $("#a.b") means element with class b and id a. The trick is the space between #a and .b Nov 14, 2013 at 7:26
  • 13
    Must be careful that you use id selector before class otherwise it does not work. Example: $(".save#country")... does not return results. May 14, 2014 at 13:18
54

Just to add that the answer that Alex provided worked for me, and not the one that is highlighted as an answer.

This one didn't work for me

$('#country.save') 

But this one did:

$('#country .save') 

so my conclusion is to use the space. Now I don't know if it's to the new version of jQuery that I'm using (1.5.1), but anyway hope this helps to anyone with similar problem that I've had.

edit: Full credit for explanation (in the comment to Alex's answer) goes to Felix Kling who says:

The space is the descendant selector, i.e. A B means "Match all elements that match B which are a descendant of elements matching A". AB means "select all element that match A and B". So it really depends on what you want to achieve. #country.save and #country .save are not equivalent.

1
  • 2
    Is the problem that you said "countery" instead of "country"?
    – amindfv
    Aug 19, 2013 at 4:22
7

It will work when adding space between id and class identifier

$("#countery .save")...

3
  • 1
    actually this worked for me, as it was not working like $('#countery.save') so thank you!
    – Nikola
    Apr 13, 2011 at 11:03
  • 1
    I've found sometimes it's picky about the space. like $(.selector > .item#id) works, but $(.selector > .item #id) doesnt. May 10, 2011 at 13:10
  • 25
    The space is the descendant selector, i.e. A B means "Match all elements that match B which are a descendant of elements matching A". AB means "select all element that match A and B". So it really depends on what you want to achieve. #countery.save and #countery .save are not equivalent. Oct 14, 2012 at 18:45
4
$("a.save, #country") 

will select both "a.save" class and "country" id.

3

In the end the same rules as for css apply.

So I think this reference could be of some valuable use.

3
  • Could you summarize the contents of your reference?
    – krlmlr
    Oct 19, 2012 at 0:06
  • Actually, according to api.jquery.com/category/selectors jQuery has some selectors of its own; also, it doesn't actually say that all CSS 1-3 selectors are supported...
    – SamB
    Oct 19, 2012 at 0:09
  • @SamB You're right but, it does say it borrows from CSS 1-3 AND adds its own. I still think the link to the W3C stuff is valid to this discussion.
    – akousmata
    Mar 25, 2013 at 16:04
2

How about this code?

$("a.save#country")
0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.