Search jQuery

jQuery Forum

Is the ":focus" selector valid?

in Using jQuery • 12 years ago

I've noticed that the ":focus" selector does indeed work, though it is not documented anywhere. Is it safe to use? Can anyone explain this?

And in a somewhat related question, is it possible to override a core selector? For example, is it possible to override the ":empty" selector to perform an additional checks in addition to checking whether or not an element is empty? I know that selectors can be chained together, but I'm wondering if it's possible to change the default behavior of a selector instead.

Replies(4)

dave.meth..

Re: Is the ":focus" selector valid?

12 years ago

The reason :focus sorta-kinda works is that it is supported by the querySelectorAll method in recent browsers. However, when qSA is not available (IE6/7 for example), jQuery has to fall back to its own Javascript-based selector engine which doesn't support :focus. So, if you want your code to work in IE and older browsers you should stick to the selectors documented at api.jquery.com which are supported on all platforms where jQuery is used.

Once you know about querySelectorAll you can see that it's not a good idea to customize the selector engine because you won't get consistent behavior across browsers. You could define a simple .reallyEmpty() plugin or just use .filter(function(){ ... }).

dennisjq

Re: Is the ":focus" selector valid?

12 years ago

Thanks for the response regarding ":focus", that makes sense.

I'm still wondering about my second question though, overriding a native selector. I understand that you can easily write your own selectors or use .filter, but just as more of a general question I was wondering if it's possible to override any of the native jQuery selectors, and if so, what that would look like. I know most things in jQuery can be extended or overridden, but didn't see any documentation about how to override a selector...

Kevin B

Re: Re: Is the ":focus" selector valid?

12 years ago

overriding a selector is just like overriding a function, you just make a new selector with the same name. However, if the browser has a native version of that selector, that native version will be used instead, therefore ignoring your modifications to the jquery version of the selector.

If you google custom jquery selector, you'll see several tutorials. I like ben nadel's tutorial, and i've made one myself. At the time of writing my tutorial i didn't know about the qSA, i just thought it was really cool that you could write your own selectors.

If you want a custom selector, i suggest giving it a name that would never be used by a browser natively, such as

:custEmpty or :myEmpty or :myPluginEmpty etc.

-- Kevin
(aka tentonaxe)

dennisjq