Skip to main content Accessibility Feedback

A vanilla JS equivalent to jQuery’s .is() API

In jQuery, you can match any element against any valid CSS selector using the .is() API.

Here’s an example with an absurdly unrealistic and complicated selector to match against.

if ( $( '.some-element' ).is( 'a[href^="#"].another-class[data-something-else]' ) ) {
    // Do something...

This is just as easy to do without jQuery, though, using the vanilla JS .matches() API. This works in all modern browsers, plus IE9 and up.

var elem = document.querySelector( '.some-element' );
if ( elem.matches( 'a[href^="#"].another-class[data-something-else]' ) ) {
    // Do something...

The one “gotcha”: some browsers initially implemented this using browser prefixes (and others—cough cough IE—still do). You can get around that issue with a really simple polyfill:

if (!Element.prototype.matches) {
    Element.prototype.matches = 
        Element.prototype.matchesSelector || 
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector || 
        Element.prototype.oMatchesSelector || 
        Element.prototype.webkitMatchesSelector ||
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i = matches.length;
            while (--i >= 0 && matches.item(i) !== this) {}
            return i > -1;            

🚀 Make 2018 the year you master JavaScript! My pocket guides and mini courses are short, focused, and made for beginners. You can do this!

Have any questions or comments about this post? Email me at or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips