Selector for best performance in jQuery?

Question

I just spent 2 hours reading online guides and blogs about jQuery selectors. Everybody says different things and every last one of them seem to be so sure. I need an expert

Answer 1

I did a benchmark test that show me it's better to choose more specific selectors.

I tested this HTML :

    

        
 Awesome stuff! 
        

            
 I like carrots! 
        
    

With 8 different selectors :

$(' div#my-id div.grand div.parent div.my-class ').css("background-color", "#cccccc"); //case-1
$(' #my-id .grand .parent div.my-class ').css("background-color", "#cccccc"); //case-2
$(' #my-id .grand .parent .my-class ').css("background-color", "#cccccc"); //case-3
$(' div#my-id div.my-class ').css("background-color", "#cccccc"); //case-4
$(' #my-id div.my-class ').css("background-color", "#cccccc"); //case-5
$(' #my-id .my-class ').css("background-color", "#cccccc"); //case-6
$(' div.my-class ').css("background-color", "#cccccc"); //case-7
$(' .my-class ').css("background-color", "#cccccc"); //case-8

And results showed me that case-1, case-2 and case-3 are better than the others. you can see the result here.