<h3 id="idref-combinators">
Reference combinators <code>/ref/</code></h3>

	The <dfn export>reference combinator</dfn> consists of two slashes
	with an intervening <a href="http://www.w3.org/TR/css3-namespace/#css-qnames">CSS qualified name</a>,
	and separates two <a>compound selectors</a>,
	e.g. ''A /attr/ B''.
	The element represented by the first <a>compound selector</a>
	explicitly references
	the element represented by the second <a>compound selector</a>.
	Unless the host language defines a different syntax for expressing this relationship,
	this relationship is considered to exist if
	the value of the specified attribute on the first element is an IDREF or an <a>ID selector</a>
	referencing the second element.

	Attribute matching for reference combinators follow the same rules as for <a href="http://www.w3.org/TR/css3-selectors/#attribute-selectors">attribute selectors</a>.

	<div class="example">
		The following example highlights an <a element>input</a> element
		when its <a href="http://www.w3.org/TR/html40/interact/forms.html#h-17.9"><code>&lt;label></code></a>
		is focused or hovered-over:

		<pre>
		label:matches(:hover, :focus) /for/ input,       /* association by "for" attribute */
		label:matches(:hover, :focus):not([for]) input { /* association by containment */
			box-shadow: yellow 0 0 10px;
		}
		</pre>
	</div>



<h3 id="local-pseudo">
The local link pseudo-class '':local-link''</h3>

	The <dfn id='local-link-pseudo'>:local-link</dfn> pseudo-class allows authors to style
	<a href="#the-any-link-pseudo">hyperlinks</a> based on the users current location within a site and to
	differentiate site-internal versus site-external links.

	The (non-functional) '':local-link'' pseudo-class represents an element that is
	the source anchor of a hyperlink whose target's absolute URL
	matches the element's own document URL.
	Any fragment identifiers are stripped before matching the document's URL against the link's URL;
	otherwise all portions of the URL are considered.

	<div class="example">
		For example, the following rule prevents links targetting the
		current page from being underlined when they are part of the
		navigation list:

		<pre>nav :local-link { text-decoration: none; } </pre>
	</div>

	As a functional pseudo-class,
	'':local-link()'' can also accept a non-negative integer as its sole argument,
	which, if the document's URL belongs to a hierarchical scheme,
	indicates the number of path levels to match:

	<ul>
		<li>'':local-link(0)'' represents a link element whose target is in the same origin as the document's URL
		<li>'':local-link(1)'' represents a link element whose target has the same origin and first path segment
		<li>'':local-link(2)'' represents a link element whose target has the same origin, first, and second path segments
		<li>etc.
	</ul>

	<div class="example">
		The following example styles all site-external links with a dashed
			underline.

		<pre>:not(:local-link(0)) { text-decoration-style: dashed; } </pre>
	</div>

	Path segments are portions of the URL's path that are separated by forward slashes (/).
	If a segment is missing from the document's URL,
	a pseudo-class requiring that segment to match does not match anything.

	<div class="example">
		So, given the links:

		<ol>
			<li><code>&lt;a href="http://www.example.com">Home&lt;/a></code>
			<li><code>&lt;a href="http://www.example.com/2011">2011&lt;/a></code>
			<li><code>&lt;a href="http://www.example.com/2011/03">March&lt;/a></code>
			<li><code>&lt;a href="http://www.example.com/2011/03/">March&lt;/a></code>
			<li><code>&lt;a href="http://www.example.com/2011/03/21">21 March&lt;/a></code>
			<li><code>&lt;a href="https://www.example.com/2011/03/">March&lt;/a></code>
			<li><code>&lt;a href="http://example.com/2011/03/">March&lt;/a></code>
		</ol>

		and the styles:

		<ol type=A>
			 <li><code>a:local-link {...}</code>
			 <li><code>a:local-link(0) {...}</code>
			 <li><code>a:local-link(1) {...}</code>
			 <li><code>a:local-link(2) {...}</code>
			 <li><code>a:local-link(3) {...}</code>
			 <li><code>a:local-link(4) {...}</code>
		</ol>

		If the document's URL is <code>http://www.example.com/2011/03/</code>:

		<ol>
			<li>Link 1 would receive Style B
			<li>Link 2 would receive Styles B and C
			<li>Link 3 would receive Styles B, C, and D
			<li>Link 4 would also receive Styles A, B, C, D, and E
			<li>Link 5 would receive Styles B, C, and D
			<li>Link 6 would remain unstyled
			<li>Link 7 would remain unstyled
			<li>Style F would not be applied to anything
		</ol>
	</div>


		The "origin" of the URL is defined by <a href="http://tools.ietf.org/html/rfc6454#section-4">RFC 6454, Section 4</a>.
		The username, password, query string, and fragment portions of the URL are not considered
		when matching against '':local-link(<var>n</var>)''.
		If the document's URL does not belong to a hierarchical scheme,
		the functional pseudo-class matches nothing.

	<p class="issue">
		It's clear that, if the document URL has at least N segments,
		then '':local-link(N)'' only matches links whose URL has at least N segments.
		(This lets you assign consistent semantics to :local-link so that,
		for example, :local-link(2) means a "within-repo" link on GitHub.)
		What about if the document url has less than N segments,
		and the link is same-page?
		Should "null segments" count as matching, or not?
