[selectors-4] Add :open and :closed pseudo-classes #7319

Author: fantasai

selectors-4/Overview.bs

@@ -2481,6 +2481,29 @@ Sound State: the '':muted'' and '':volume-locked'' pseudo-classes</h3>
 <h2 id="display-state-pseudos">
 Element Display State Pseudo-classes</h2>
 
+<h3 id="open-state">
+Collapse State: the '':open'' and '':closed'' pseudo-class</h3>
+
+	The <dfn>:open</dfn> pseudo-class represents an element
+	that has both “open” and “closed” states,
+	and which is currently in the “open” state.
+
+	The <dfn>:closed</dfn> pseudo-class represents an element
+	that has both “open” and “closed” states,
+	and which is currently in the closed state.
+
+	Exactly what “open” and “closed” mean is host-language specific,
+	but exemplified by elements such as
+	HTML's <{details}>, <{select}>, and <{dialog}> elements,
+	all of which can be toggled “open” to display more content
+	(or any content at all, in the case of <{dialog}>).
+
+	Note: Being “open” or “closed” is a semantic state.
+	An element not currently being displayed
+	(for example, one that has ''visibility: collapse'',
+	or belongs to a ''display: none'' subtree)
+	can still be “open” and will match '':open''.
+
 <h3 id="modal-state">
 Modal (Exclusive Interaction) State: the '':modal'' pseudo-class</h3>
 
@@ -4007,6 +4030,8 @@ Changes since the 7 May 2022 Working Draft</h3>
 
 	Significant changes since the <a href="https://www.w3.org/TR/2022/WD-selectors-4-20220507/">7 May 2022 Working Draft</a>:
 
+	* Added '':open'' and '':closed'' pseudo-classes.
+		(<a href="https://github.com/w3c/csswg-drafts/issues/7319">Issue 7319</a>)
 	* Disallowed [=pseudo-elements=] from '':has()'' unless explicitly allowed
 		by the pseudo-element’s definition.
 		(<a href="https://github.com/w3c/csswg-drafts/issues/7463">Issue 7463</a>)