CODEWITHSUNDEEP
javascriptjqueryselector
silviubogan
silviubogan

Reputation: 3461

Can I rely on the fact that the jQuery find method accepts selectors starting with "> "?

I have created this JSFiddle that shows how the jQuery find method accepts selectors starting with >. If it did not understand that beginning of the selector, it would also color in red the f letter, just like it does when removing the > from the beginning of the selector and running the JSFiddle again. The > at the beginning of the selector means that the rest of the selector is to be tested directly under that <table> element, not in nested tables.

I read the documentation for the find jQuery method and it does not explain this behavior.

So, can I rely on this behavior? Is it documented or explained somewhere on the Internet?

Update: I know that selectors like "table > tbody" are part of the CSS specification and can always be used in jQuery, but my question is about selectors starting with >. This is not a feature of CSS according to my knowledge. I think that jQuery somehow interprets the > and either understands that I want to look directly under the table element or appends the selector passed at the find method to the selector with which I obtained the table element.

Update 2: As you can see in the JSFiddle, there are two selectors. The final element is computed in two steps, not in one step, so the jQuery progressively computes the final element, it does not append the second selector to the first selector and pass the final string selector to the document.querySelectorAll function. I want to know for sure if I can rely on the jQuery's find method's undestanding of selectors starting with >.

Upvotes: 1

Views: 60

Answers (2)

Chuck Le Butt
Chuck Le Butt

Reputation: 48798

The jQuery selector just accepts standard CSS. The child selector (>) is an example of a standard CSS selector, and it is very well supported.

Update: Your jQuery is no different than: 

$("table:first > tbody > tr > td:last-child").css("color", "red");

This should explain why it's still standard CSS.

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167192

That's called direct child selector, which is a basic CSS concept. You can very much rely on it.

It is not the selectors starting with >. See before. It is used by find(). It combines with the previous parent selector. So your selector will become effectively:

"table:first > tbody > tr > td:last-child"

Isn't the above one good?

Upvotes: 2

Related Questions