Skip to main content Accessibility Feedback

Testing for CSS pseudo-class support with vanilla JavaScript

Yesterday, we learned how to check for CSS feature support with vanilla JS using CSS.supports(). Unfortunately, this method cannot be used to test for CSS pseudo-classes.

Fortunately, user cuixiping over on StackOverflow shared this useful helper method that let’s you do just that!

/**
 * Test for pseudo-class support
 * @param  {String} pseudoClass The pseudo-class
 * @return {Boolean}            Returns true if supported
 */
var supportsPseudo = function (pseudoClass) {

    // Get the document stylesheet
    var ss = document.styleSheets[0];

    // Create a stylesheet if one doesn't exist
    if (!ss) {
        var el = document.createElement('style');
        document.head.appendChild(el);
        ss = document.styleSheets[0];
        document.head.removeChild(el);
    }

    // Test the pseudo-class by trying to style with it
    var testPseudo = function () {
        try {
            if (!(/^:/).test(pseudoClass)) {
                pseudoClass = ':' + pseudoClass;
            }
            ss.insertRule('html' + pseudoClass + '{}', 0);
            ss.deleteRule(0);
            return true;
        } catch(e) {
            return false;
        }
    };

    // Run the test
    return testPseudo();

};

To use it, pass in the pseudo-class you’d like to test.

if (supportsPseudo(':nth-of-type()')) {
    // :nth-of-type is supported...
} else {
    // :nth-of-type is NOT supported...
}

Browser Compatibility #

This works in all modern browsers, and IE9 and above.


🚀 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 chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips