Help understand how to choose a jQuery attribute selector

Question

I want to find <td role="foo" class="one two three four"> within <div id="myid">

These two selectors work:

 $('#myid td[role=foo]') $('#myid .two') 

But this is not, why?

 $('#myid .two td[role=foo]') 

Answer 1

Since the space in the selector string is a descendant selector .

You will need to do:

 $('#myid td.two[role=foo]') 

As you did, you were looking for <td role="foo"> elements that are descendants of .two .

Answer 2

Because your selector:

 $('#myid .two td[role=foo]') 

looks for td[role=foo] inside the element of the .two class inside the id element #myid .

You use the descendant selector instead of looking for td[role=foo].two , which I think is what you want.

Answer 3

Do you want to:

 $("#myid td[role=foo].two")... 

This selector:

 $('#myid .two td[role=foo]') 

means: find the element with the identifier "myid". From it, find all descendants with the class "two". From these elements, find all descendant elements of <td> that have a role attribute with a value of "foo".