Skip to main content Skip to secondary navigation 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;            
If you liked this article, you might also enjoy Ditching jQuery, a step-by-step training guide to help you master vanilla JavaScript. Start learning today →

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

Get the Spare Parts Newsletter

Every week, I send out a short email packed with web development resources and interesting stuff from around the web.