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.