According to the Mozilla Developer Network (MDN), the Element.matches() method tests to see if the contextual node matches the given CSS selector. The .matches() method has solid support going back to IE9; though, IE uses a different method name (.msMatchesSelector() as opposed to .matches()). As such, we can pretty much depend on this method in all modern browsers.
NOTE: I chose to create a "username" field on purpose so that my browser would have some autofill capabilities that it would apply to the field.
As you can see, there's very little going on in this demo. Essentially, I'm looking for the node.matches() method but, will fall-back to the node.msMatchesSelector() method in IE. I then use the chosen method to look for the given CSS pseudo-class.
Now, if I run this in the browser, explicitly add the ":hover" pseudo-class and then autofill the username, we get the following test outcome:
Anyway, this is more of a note-to-self; but, it's definitely good to know that there's a cross-browser way to check an element for CSS pseudo-classes. If nothing else, this will help me when trying to detect autofill behaviors in the browser.
Want to use code from this post? Check out the license.