-
Notifications
You must be signed in to change notification settings - Fork 790
Expand file tree
/
Copy pathdeferred-for-level-5
More file actions
129 lines (104 loc) · 5.27 KB
/
deferred-for-level-5
File metadata and controls
129 lines (104 loc) · 5.27 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<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><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><a href="http://www.example.com">Home</a></code>
<li><code><a href="http://www.example.com/2011">2011</a></code>
<li><code><a href="http://www.example.com/2011/03">March</a></code>
<li><code><a href="http://www.example.com/2011/03/">March</a></code>
<li><code><a href="http://www.example.com/2011/03/21">21 March</a></code>
<li><code><a href="https://www.example.com/2011/03/">March</a></code>
<li><code><a href="http://example.com/2011/03/">March</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?