bennadel · August 1, 2018 12:30
diff --git a/index.htm b/index.htm
 <!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8" />
 	<title>
 		Checking To See If An Element Has A CSS Pseudo-Class In JavaScript
 	</title>
 
 	<link rel="stylesheet" type="text/css" href="./demo.css" />
 </head>
 <body>
 
 	<h1>
 		Checking To See If An Element Has A CSS Pseudo-Class In JavaScript
 	</h1>
 
 	<form method="get" action="./">
 		<label for="username">Username:</label>
 		<input type="text" id="username" name="username" class="username" />
 		<button type="submit">Login</button>
 	</form>
 
 	<ul>
 		<li>
 			<a href="javascript:testFor( ':-webkit-autofill' )">
 				Test for <code>:-webkit-autofill</code>
 			</a>
 		</li>
 		<li>
 			<a href="javascript:testFor( ':hover' )">
 				Test for <code>:hover</code>
 			</a>
 		</li>
 		<li>
 			<a href="javascript:testFor( ':active' )">
 				Test for <code>:active</code>
 			</a>
 		</li>
 		<li>
 			<a href="javascript:testFor( ':focus' )">
 				Test for <code>:focus</code>
 			</a>
 		</li>
 	</ul>
 
 	<script type="text/javascript">
 
 		// Gather our DOM references.
 		var username = document.querySelector( "#username" );
 
 		// --------------------------------------------------------------------------- //
 		// --------------------------------------------------------------------------- //
 
 		// I test the USERNAME input for the existence of the given pseudo-class.
 		function testFor( pseudoClass ) {
 
 			console.group( "Testing for Pseudo-Class" );
 			console.log( "Pseudo-class:", pseudoClass );
 			console.log( "Has pseudo-class:", matches( username, pseudoClass ) );
 			console.log( "Class list:", username.classList.toString() ); // IE doesn't support .value.
 			console.groupEnd();
 
 		}
 
 
 		// I determine if the given node matches the given selector.
 		function matches( node, selector ) {
 
 			// Most modern browsers support the ".matches" method. However, IE9+ uses a
 			// non-standard method name. As such, we can fall-back to the IE version when
 			// the standard one doesn't exist and that should cover all the modern
 			// browsers that are in use.
 			// --
 			// READ MORE: https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
 			var nativeMatches = ( node.matches || node.msMatchesSelector );
 
 			// CAUTION: If an invalid pseudo-selector is used in Firefox or IE, the
 			// browser will throw a SyntaxError, "is not a valid selector". It will do
 			// the same for .querySelector() as well, just an FYI.
 			try {
 
 				return( nativeMatches.call( node, selector ) );
 
 			} catch ( error ) {
 
 				// In the case of an error, we're going to assume it's a pseudo-selector
 				// issue and NOT a general support issue (since we don't care about
 				// really old browsers).
 				return( false );
 
 			}
 
 		}
 
 	</script>
 
 </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>
	Checking To See If An Element Has A CSS Pseudo-Class In JavaScript
	</title>

	<link rel="stylesheet" type="text/css" href="./demo.css" />
	</head>
	<body>

	<h1>
	Checking To See If An Element Has A CSS Pseudo-Class In JavaScript
	</h1>

	<form method="get" action="./">
	<label for="username">Username:</label>
	<input type="text" id="username" name="username" class="username" />
	<button type="submit">Login</button>
	</form>

	<ul>
	<li>
	<a href="javascript:testFor( ':-webkit-autofill' )">
	Test for <code>:-webkit-autofill</code>
	</a>
	</li>
	<li>
	<a href="javascript:testFor( ':hover' )">
	Test for <code>:hover</code>
	</a>
	</li>
	<li>
	<a href="javascript:testFor( ':active' )">
	Test for <code>:active</code>
	</a>
	</li>
	<li>
	<a href="javascript:testFor( ':focus' )">
	Test for <code>:focus</code>
	</a>
	</li>
	</ul>

	<script type="text/javascript">

	// Gather our DOM references.
	var username = document.querySelector( "#username" );

	// --------------------------------------------------------------------------- //
	// --------------------------------------------------------------------------- //

	// I test the USERNAME input for the existence of the given pseudo-class.
	function testFor( pseudoClass ) {

	console.group( "Testing for Pseudo-Class" );
	console.log( "Pseudo-class:", pseudoClass );
	console.log( "Has pseudo-class:", matches( username, pseudoClass ) );
	console.log( "Class list:", username.classList.toString() ); // IE doesn't support .value.
	console.groupEnd();

	}


	// I determine if the given node matches the given selector.
	function matches( node, selector ) {

	// Most modern browsers support the ".matches" method. However, IE9+ uses a
	// non-standard method name. As such, we can fall-back to the IE version when
	// the standard one doesn't exist and that should cover all the modern
	// browsers that are in use.
	// --
	// READ MORE: https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
	var nativeMatches = ( node.matches \|\| node.msMatchesSelector );

	// CAUTION: If an invalid pseudo-selector is used in Firefox or IE, the
	// browser will throw a SyntaxError, "is not a valid selector". It will do
	// the same for .querySelector() as well, just an FYI.
	try {

	return( nativeMatches.call( node, selector ) );

	} catch ( error ) {

	// In the case of an error, we're going to assume it's a pseudo-selector
	// issue and NOT a general support issue (since we don't care about
	// really old browsers).
	return( false );

	}

	}

	</script>

	</body>
	</html>