Fastest selector method in jquery and CSS - ID or not?

Question

What is fastest in jquery/javascript?

$('#myID .myClass')

or

$('.myClass')

What is best to use in CSS?

#myID .myClass{}

or

.myClass{}

I see now that I should have explained better. Sorry!

Ofceauce ID is a faster selector in both CSS and JavaScript. But some times you need to use class since there are multiple selectors.

Say forexample that I have i BIG html document. In the middle of the page I have:

<div id="myID">

<a class="myClass">link1</a>

<a class="myClass">link1</a>

<a class="myClass">link1</a>

</div>

If I want to target all "myClass". Would it then be better to target the ID before targeting the classes? (then I wouldn't have to do domtravel of the entire HTML document) Eg.:

Would this:

$('#myID').find('.myClass')

Be faster than:

$('.myClass')

Answer 1

My testing on modern browsers suggests that you should go with either,

$('#id').find('.class') // or
$('.class')

but not,

$('#id .class')

Reason being that all modern browsers implement getElementsByClassName resulting in almost-constant time lookups by class name (assuming a hash implementation). Which browsers are modern is another subjective question.

Answer 2

They're roughly the same in most modern browsers since class-names are hashed internally. The difference is that older browsers don't have a .getElementsByClassName or equivalent method, so .myClass is parsed internally to jQuery and EVERY element in the dom is walked and checked for the classname (or it uses XPath when possible).

Always try to use #myID .myClass when possible as it allows jQuery to jump directly to #myID and traverse from there when necessary.