Add the :open and :closed pseudo-selectors

These pseudo-selectors are defined in CSS here:
https://drafts.csswg.org/selectors-4/#open-state

Author: josepharhar

source

@@ -74232,6 +74232,56 @@ Demos:
    <dd><p>The <code data-x="selector-volume-locked">:volume-locked</code> <span>pseudo-class</span>
    must match all <span data-x="media element">media elements</span> when the user agent's
    <span>volume locked</span> is true.</p></dd>
+
+   <dt><dfn selector><code data-x="selector-open">:open</code></dfn></dt>
+   <dd>
+    <p>The <code data-x="selector-open">:open</code> <span>pseudo-class</span> must match any
+    element that <span>matches the open selector</span>.<p>
+
+    <p>To determine if an <code>Element</code> <var>element</var> <dfn>matches the open
+    selector</dfn>:</p>
+
+    <ol>
+     <li>
+      <p>If <var>element</var> is a <code>details</code> or <code>dialog</code> element:</p>
+
+      <ol>
+       <li><p>Return true if <var>element</var> has the <code data-x="attr-dialog-open">open</code>
+       attribute, otherwise false.</p></li>
+      </ol>
+     </li>
+
+     <li><p>If <var>element</var> is a <code>select</code> element and <var>element</var> is being
+     rendered as a button with a popup and the popup is open, then return true.</p></li>
+
+     <li><p>Return false.</p></li>
+    </ol>
+   </dd>
+
+   <dt><dfn selector><code data-x="selector-closed">:closed</code></dfn></dt>
+   <dd>
+    <p>The <code data-x="selector-closed">:closed</code> <span>pseudo-class</span> must match any
+    element that <span>matches the closed selector</span>.<p>
+
+    <p>To determine if an <code>Element</code> <var>element</var> <dfn>matches the closed
+    selector</dfn>:</p>
+
+    <ol>
+     <li>
+      <p>If <var>element</var> is a <code>details</code> or <code>dialog</code> element:</p>
+
+      <ol>
+       <li><p>Return false if <var>element</var> has the <code data-x="attr-dialog-open">open</code>
+       attribute, otherwise true.</p></li>
+      </ol>
+     </li>
+
+     <li><p>If <var>element</var> is a <code>select</code> element and <var>element</var> is being
+     rendered as a button with a popup and the popup is closed, then return true.</p></li>
+
+     <li><p>Return false.</p></li>
+    </ol>
+   </dd>
   </dl>
 
   <p class="note">This specification does not define when an element matches the <code undefined