0

I see some posts on this same issue but would like further clarification as I cannot get any of these answer to work especially as I can't pick the answer out of the Jquery documentation.

I want to combine some classes for the convenience of cascading appropriate styling. I could simply replicate the styling in a single class but I am assuming that that would be bad practice. 

<div class="left_Item drop_Down" id="col_1">some stuff</div>

$(".left_Item, .drop_Down#col_1").whatever....; 
// matches every occurrence of class left_Item with the single occurrence of    //drop_Down#col_1   ... this tallies with the multiple selector documentation.

$("#col_1").whatever....;
//obviously does match as the selector is only looking at the id.
//however
$(".drop_Down#col_1").whatever....; 
//does not match  Does this imply that the classes cannot be matched separately? So....
$(".left_Item.drop_Down#col_1").whatever....;
// various posts on so state that this should match it does not for me. Nor does
$(".left_Item .drop_Down#col_1").whatever....;


$(".left_Item").filter(".drop_Down#col_1).whatever....;
// various posts on so state that this should match also but it does not for me.

So firstly I assume that I am doing the correct thing using multiple classes. If not I'll stop trying to make this work!

Secondly please can some one give the correct jquery syntax to match an element with multiple classes.

Thx

Improve this question
3
  • All of the selectors above work, except the second to last which looks for a child of .left_Item: jsfiddle.net/6RuPu Please show the actual code you have. Commented Jul 14, 2012 at 10:22
  • @Juhana ok thank you so much for that jsfiddle that is useful Commented Jul 14, 2012 at 12:54
  • @Juhana many thanks for that code snippet it is very useful to see it laid out like I would not have thought to do that. You probably think me stupid but I resolved the immediate issue by selecting the id in one instance and using the parent div in another. I will have to play with that jsfiddle a little longer to clarify why I got that unexpected result. I couldn't yet confidently say I understood what I did wrong but I am further forward. Many thx Commented Jul 14, 2012 at 13:04

2 Answers 2

Reset to default
1

The syntax is as follows (for CSS or jQuery):

.class1.class2

In your case:

$(".left_Item.drop_Down").whatever...

If you want to use an id as well as a class selector, then put the id first:

$("#col_1.left_Item.drop_Down")

Though since ids are supposed to be unique, I don't understand why you don't just use $("#col_1")

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

@Joe yes indeed I would and in fact have used the Id. The reason I ended up with the multiple classes was to reuse the css defined else where. The selectors I had already coded then stopped working and so I wanted to understand how this is meant to work because clearly I had misunderstood.
0

If the classes are your main focus then try this.

$('.left_Item.drop_Down').whatever...

But if you want an Id that has classes left_Item drop_Down you might do this

$('#col_1.left_Item.drop_Down').whatever...
Improve this answer

4 Comments

Those look for child elements; the first looks for a child of .left_Item which has class .drop_Down, the second requires additionally that .left_Item has a parent with id #col_1.
Now the answer is technically correct, but also identical to what the OP has.
@Juhana sorry for asking what is probably a stupid question but what is OP?
Original Poster, the person who asked the question. (You.)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.