Getting the selected option in HTML without jQuery

Question

I'm using the following function on each <option> to determine whether it is selected:

var _matches = function(el, selector) {
  var fn = el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector;
  return fn.call(el, selector);
};

It works fine in jsdom in NodeJS, and it works for the selector :checked (on checkbox inputs) in the browser, but not for the selector :selected, which is odd.

I get the error (in Chrome):

Uncaught SyntaxError: Failed to execute 'matches' on 'Element': ':selected' is not a valid selector.

Answer 1

The error message seems to be correct, :selected is not a valid selector, and even querySelector('option:selected') fails

The valid pseudo selectors are

:active
:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited

The correct psuedo class to use would be :checked, MDN says

The :checked CSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">) or option (<option> in a <select>) element that is checked or toggled to an on state.