[css-values-5] Clean up tree-counting functions prose.

Author: fantasai

css-values-5/Overview.bs

@@ -2963,26 +2963,37 @@ Tree Counting Functions: the ''sibling-count()'' and ''sibling-index()'' notatio
 	Like '':nth-child()'',
 	''sibling-index()'' is 1-indexed.
 
+	Together, these are known as the <dfn>tree-counting functions</dfn>.
+
 	Note: The ''counter()'' function can provide similar abilities as ''sibling-index()'',
 	but returns a <<string>> rather than an <<integer>>.
 
-	When used on an [=element-backed pseudo-element=] which is also a real element,
-	the tree counting functions resolve for that real element. For other [=pseudo-elements=]
-	they resolve as if they were resolved against the
-	originating element. It follows that for nested pseudo-elements the resolution
-	will recursively walk the originating elements until a real element is found.
+	When used on an [=element-backed pseudo-element=] that is also a real element,
+	the [=tree-counting functions=] resolve for that real element.
+	For other [=pseudo-elements=],
+	they resolve as if they were resolved against the [=ultimate originating element=].
+
+
+	A [=tree-counting function=]
+	is is a type of  [=tree-scoped-reference/loosely-matched=] [=tree-scoped reference=],
+	which is resolved as if the element were given an automatic [=tree-scoped name=]
+	that matches an identical automatic name on the [=tree-scoped reference=]
+	of the [=tree-counting function=].
+	If the reference fails to match
+	(because the element is, for example, in a descendent shadow tree from the stylesheet),
+	the function returns 0.
 
-	A tree counting function is a [=tree-scoped reference=] where it references
-	an implicit [=tree-scoped name=] for the element it resolves against. This is
-	done to not leak tree information to an outer [=tree=]. A tree counting
-	function that is scoped to an outer [=tree=] relative to the element it
-	resolves against, will alway resolve to 0.
+	Note: This restriction is to avoid leaking shadow tree information to outer [=trees=].
 
 	<div class=example>
-		Examples of how ''sibling-index()'' resolves for pseudo-elements, and when the
-		rule and the element come from different [=trees=]:
+		The following examples show how ''sibling-index()'' resolves
+		for [=pseudo-elements=] and across [=shadow tree=] boundaries:
 
 		<pre class=lang-css>
+		#target {
+			/* Based on the sibling-index() of #target */
+			width: calc(sibling-index() * 10px);
+		}
 		#target::before {
 			/* Based on the sibling-index() of #target */
 			width: calc(sibling-index() * 10px);
@@ -2992,23 +3003,24 @@ Tree Counting Functions: the ''sibling-count()'' and ''sibling-index()'' notatio
 			width: calc(sibling-index() * 10px);
 		}
 		::slotted(*)::before {
-			/* Based on the sibling-index() of the slotted element - outer tree */
+			/* Based on the sibling-index() of the slotted element in the outer tree */
 			width: calc(sibling-index() * 10px);
 		}
 		::part(my-part) {
-			/* 0px - inner tree */
+			/* Returns 0px, because referencing a shadow tree */
 			width: calc(sibling-index() * 10px);
 		}
 		:host {
-			/* Based on the hosts sibling-index() - outer tree */
+			/* Based on the host's sibling-index() in the outer tree */
 			width: calc(sibling-index() * 10px);
 		}
 		</pre>
 
 	</div>
 
-	Note: These functions, to match [=selectors=] like '':nth-child()'', operate on the DOM tree,
-	rather than the [=flat tree=] like most CSS values do.
+	Note: Like '':nth-child()'' and other counting selectors,
+	the [=tree-counting functions=] operate on the DOM tree,
+	rather than the [=flat tree=] like most CSS operations do.
 	They may, in the future, have variants that support counting [=flat tree=] siblings.
 
 	Note: These functions may, in the future,