[selectors] Finish up :has()

Author: tabatkins

selectors/Overview.bs

@@ -124,6 +124,14 @@ Selectors Overview</h2>
 						and/or <a>compound selector</a> <var>s2</var>
 				<td><a href="#matches">Matches-any pseudo-class</a>
 				<td>4
+			<tr>
+				<td><code>E:has(<var>rs1</var>, <var>rs2</var>)</code>
+				<td>an E element,
+					if either of the <a>relative selectors</a> <var>rs1</var> or <var>rs2</var>,
+					when evaluated with E as the <a>:scope elements</a>,
+					match an element
+				<td><a section href="#relational"></a>
+				<td>4
 		<tbody>
 			<tr>
 				<td><code>E.warning</code>
@@ -1266,13 +1274,14 @@ The Negation Pseudo-class: '':not()''</h3>
 	which is equivalent to ''foo'' but with a higher
 	specificity.
 
-<h3 id='has-pseudo'>
+<h3 id='relational'>
 The Relational Pseudo-class: '':has()''</h3>
 
 	The relational pseudo-class, <dfn id='has-pseudo'>:has()</dfn>,
-	is a functional pseudo-class taking a <a>relative selector</a> as an argument.
-	It represents an element if the <a>relative selector</a>,
-	scoped to the element,
+	is a functional pseudo-class taking a <a>relative selector</a> <a title="selector list">list</a> as an argument.
+	It represents an element if any of the <a>relative selectors</a>,
+	when <a href="#absolutize">absolutized</a>
+	and evaluated with the element as the <a>:scope elements</a>,
 	would match at least one element.
 
 	<div class='example'>
@@ -1285,8 +1294,14 @@ The Relational Pseudo-class: '':has()''</h3>
 		that don't contain any heading elements:
 
 		<pre>section:not(:has(h1, h2, h3, h4, h5, h6))</pre>
+
+		The following selector matches a <code>&lt;dt></code> element
+		immediately followed by another <code>&lt;dt></code> element:
+
+		<pre>dt:has(+ dt)</pre>
 	</div>
 
+
 <h2 id="elemental-selectors">
 Elemental selectors</h2>
 

selectors/Overview.html

@@ -142,7 +142,7 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
 		<li><a href=#grouping><span class=secno>4.1</span> Selector Lists</a>
 		<li><a href=#matches><span class=secno>4.2</span> The Matches-Any Pseudo-class: <span class=css data-link-type=maybe title=:matches()>:matches()</span></a>
 		<li><a href=#negation><span class=secno>4.3</span> The Negation Pseudo-class: <span class=css data-link-type=maybe title=:not()>:not()</span></a>
-		<li><a href=#has-pseudo0><span class=secno>4.4</span> The Relational Pseudo-class: <span class=css data-link-type=maybe title=:has()>:has()</span></a></ul>
+		<li><a href=#relational><span class=secno>4.4</span> The Relational Pseudo-class: <span class=css data-link-type=maybe title=:has()>:has()</span></a></ul>
 	<li><a href=#elemental-selectors><span class=secno>5</span> Elemental selectors</a>
 		<ul class=toc>
 		<li><a href=#type-selectors><span class=secno>5.1</span> Type (tag name) selector</a>
@@ -353,6 +353,15 @@ <h2 class="heading settled heading" data-level=2 id=overview><span class=secno>2
 						and/or <a data-link-type=dfn href=#compound title="compound selector">compound selector</a> <var>s2</var>
 				<td><a href=#matches>Matches-any pseudo-class</a>
 				<td>4
+			<tr>
+				<td><code>E:has(<var>rs1</var>, <var>rs2</var>)</code>
+				<td>an E element,
+					if either of the <a data-link-type=dfn href=#relative-selector- title="relative selectors">relative selectors</a> <var>rs1</var> or <var>rs2</var>,
+					when evaluated with E as the <a data-link-type=dfn href=#scope-element title=":scope elements">:scope elements</a>,
+					match an element
+				<td><a data-section="" href=#relational>section 4.4 
+The Relational Pseudo-class: :has()</a>
+				<td>4
 		<tbody>
 			<tr>
 				<td><code>E.warning</code>
@@ -1480,13 +1489,14 @@ <h3 class="heading settled heading" data-level=4.3 id=negation><span class=secno
 	which is equivalent to <span class=css data-link-type=maybe title=foo>foo</span> but with a higher
 	specificity.
 
-<h3 class="heading settled heading" data-level=4.4 id=has-pseudo0><span class=secno>4.4 </span><span class=content>
-The Relational Pseudo-class: <a class=css data-link-type=maybe href=#has-pseudo title=:has()>:has()</a></span><a class=self-link href=#has-pseudo0></a></h3>
+<h3 class="heading settled heading" data-level=4.4 id=relational><span class=secno>4.4 </span><span class=content>
+The Relational Pseudo-class: <a class=css data-link-type=maybe href=#has-pseudo title=:has()>:has()</a></span><a class=self-link href=#relational></a></h3>
 
 <p>	The relational pseudo-class, <dfn class=css-code data-dfn-type=selector data-export="" id=has-pseudo>:has()<a class=self-link href=#has-pseudo></a></dfn>,
-	is a functional pseudo-class taking a <a data-link-type=dfn href=#relative-selector- title="relative selector">relative selector</a> as an argument.
-	It represents an element if the <a data-link-type=dfn href=#relative-selector- title="relative selector">relative selector</a>,
-	scoped to the element,
+	is a functional pseudo-class taking a <a data-link-type=dfn href=#relative-selector- title="relative selector">relative selector</a> <a data-link-type=dfn href=#selector-list title="selector list">list</a> as an argument.
+	It represents an element if any of the <a data-link-type=dfn href=#relative-selector- title="relative selectors">relative selectors</a>,
+	when <a href=#absolutize>absolutized</a>
+	and evaluated with the element as the <a data-link-type=dfn href=#scope-element title=":scope elements">:scope elements</a>,
 	would match at least one element.
 
 	<div class=example>
@@ -1497,7 +1507,12 @@ <h3 class="heading settled heading" data-level=4.4 id=has-pseudo0><span class=se
 <p>		The following selector matches <code>&lt;section&gt;</code> elements
 		that don’t contain any heading elements:
 
-<pre>section:not(:has(h1, h2, h3, h4, h5, h6))</pre>	</div>
+<pre>section:not(:has(h1, h2, h3, h4, h5, h6))</pre>
+<p>		The following selector matches a <code>&lt;dt&gt;</code> element
+		immediately followed by another <code>&lt;dt&gt;</code> element:
+
+<pre>dt:has(+ dt)</pre>	</div>
+
 
 <h2 class="heading settled heading" data-level=5 id=elemental-selectors><span class=secno>5 </span><span class=content>
 Elemental selectors</span><a class=self-link href=#elemental-selectors></a></h2>