Question

If I have this html

<ul class="link color">...</ul>

and jQuery:

$(".link li").click(function(){
    //do stuff
});

or

$(".color li").click(function(){
    //do stuff
});

it works fine.

But I only want to trigger when the class has BOTH link and color. How can I tell jQuery to only trigger on both existing as this doesn’t work:

$(".link .color li").click(function(){
    //do stuff
});

Answer 1

$(".link.color li").click(function(){
    //do stuff
});

The reason why $(".link .color li") doesn’t select it is because it is trying to grab all li that are children of the class color that are the children of class link. When you put the spaces in there it ends up working it’s way down the DOM, but when you put the selectors right next to each other it only grabs the ones that meet all of the selectors.