Source Browser ?

1\usemodule[present-lines]
2
3\definecolor[maincolor][b=.4]
4
5\setuppapersize[A4][A4]
6
7\startdocument[title=CSS selectors,subtitle={\CONTEXT\ 2017 Maibach}]
8
9\startbuffer[selector-001]
10<?xml version="1.0" ?>
11
12<a>
13    <b class="one">b.one</b>
14    <b class="two">b.two</b>
15    <b class="one two">b.one.two</b>
16    <b class="three">b.three</b>
17    <b id="first">b#first</b>
18    <c>c</c>
19    <d>d e</d>
20    <e>d e</e>
21    <e>d e e</e>
22    <d>d f</d>
23    <f foo="bar">@foo = bar</f>
24    <f bar="foo">@bar = foo</f>
25    <f bar="foo1">@bar = foo1</f>
26    <f bar="foo2">@bar = foo2</f>
27    <f bar="foo3">@bar = foo3</f>
28    <f bar="foo+4">@bar = foo+4</f>
29    <g>g</g>
30    <g><gg><d>g gg d</d></gg></g>
31    <g><gg><f>g gg f</f></gg></g>
32    <g><gg><f class="one">g gg f.one</f></gg></g>
33    <g>g</g>
34    <g><gg><f class="two">g gg f.two</f></gg></g>
35    <g><gg><f class="three">g gg f.three</f></gg></g>
36    <g><f class="one">g f.one</f></g>
37    <g><f class="three">g f.three</f></g>
38    <h whatever="four five six">@whatever = four five six</h>
39</a>
40\stopbuffer
41
42\startbuffer[selector-002]
43<?xml version="1.0" ?>
44
45<document>
46    <title class="one"  >title 1</title>
47    <title class="two"  >title 2</title>
48    <title class="one"  >title 3</title>
49    <title class="three">title 4</title>
50</document>
51\stopbuffer
52
53\startbuffer[selector-003]
54<?xml version="1.0" ?>
55
56<document>
57    <title    class="one">title 1</title>
58    <subtitle class="sub">title 1.1</subtitle>
59    <title    class="two">title 2</title>
60    <subtitle class="sub">title 2.1</subtitle>
61    <title    class="one">title 3</title>
62    <subtitle class="sub">title 3.1</subtitle>
63    <title    class="two">title 4</title>
64    <subtitle class="sub">title 4.1</subtitle>
65</document>
66\stopbuffer
67
68\xmlloadbuffer{selector-001}{selector-001}
69\xmlloadbuffer{selector-002}{selector-002}
70\xmlloadbuffer{selector-003}{selector-003}
71
72\startxmlsetups xml:selector:demo
73    \ignorespaces\xmlverbatim{#1}\par
74\stopxmlsetups
75
76\unexpanded\def\showCSSdemo#1#2%
77  {\blank
78   \textrule{\tttf#2}
79   \startlines
80   \dontcomplain
81   \tttf \obeyspaces
82   \xmlcommand{#1}{#2}{xml:selector:demo}
83   \stoplines
84   \blank}
85
86\startchapter[title=Needed or not?]
87
88\startitemize
89\startitem
90    used in \HTML\ styling
91\stopitem
92\startitem
93    a bit different from the path based method
94\stopitem
95\startitem
96    shortcuts for filtering by attribute
97\stopitem
98\startitem
99    class filtering is special because it checks for list
100\stopitem
101\startitem
102    one can select more at the same time
103\stopitem
104\startitem
105    performance is okay compared to path lookup
106\stopitem
107\startitem
108    selectors go between curly braces:
109    \starttyping
110        \xmlall {#1} {{foo bar .whatever, bar foo .whatever}}
111    \stoptyping
112\stopitem
113\stopitemize
114
115\stopchapter
116
117\startchapter[title=Supported methods]
118
119The following methods are supported:
120
121\starttabulate[|T||]
122\NC \type {element}                   \NC all tags element \NC \NR
123\NC \type {element-1 > element-2}     \NC all tags element-2 with parent tag element-1 \NC \NR
124\NC \type {element-1 + element-2}     \NC all tags element-2 preceded by tag element-1 \NC \NR
125\NC \type {element-1 ~ element-2}     \NC all tags element-2 preceded by tag element-1 \NC \NR
126\NC \type {element-1 element-2}       \NC all tags element-2 inside tag element-1 \NC \NR
127\NC \type {[attribute]}               \NC has attribute \NC \NR
128\NC \type {[attribute=value]}         \NC attribute equals value\NC \NR
129\NC \type {[attribute~=value]}        \NC attribute contains value (space is separator) \NC \NR
130\NC \type {[attribute^="value"]}      \NC attribute starts with value \NC \NR
131\NC \type {[attribute$="value"]}      \NC attribute ends with value \NC \NR
132\NC \type {[attribute*="value"]}      \NC attribute contains value \NC \NR
133\NC \type {.class}                    \NC has class \NC \NR
134\NC \expanded{\type {\letterhash id}} \NC has id \NC \NR
135\NC \type {:nth-child(n)}             \NC the child at index n \NC \NR
136\NC \type {:nth-last-child(n)}        \NC the child at index n from the end \NC \NR
137\NC \type {:first-child}              \NC the first child \NC \NR
138\NC \type {:last-child}               \NC the last child \NC \NR
139\NC \type {:nth-of-type(n)}           \NC the match at index n \NC \NR
140\NC \type {:nth-last-of-type(n)}      \NC the match at index n from the end \NC \NR
141\NC \type {:first-of-type}            \NC the first match \NC \NR
142\NC \type {:last-of-type}             \NC the last match \NC \NR
143\NC \type {:only-of-type}             \NC the only match or nothing \NC \NR
144\NC \type {:only-child}               \NC the only child or nothing \NC \NR
145\NC \type {:empty}                    \NC only when empty \NC \NR
146\NC \type {:root}                     \NC the whole tree \NC \NR
147\stoptabulate
148
149\stopchapter
150
151\startchapter[title=Filtering classes]
152
153\typebuffer[selector-001] \showCSSdemo{selector-001}{{.one}} \page
154\typebuffer[selector-001] \showCSSdemo{selector-001}{{.one, .two}} \page
155\typebuffer[selector-001] \showCSSdemo{selector-001}{{.one, .two, \letterhash first}} \page
156
157\stopchapter
158
159\startchapter[title=Filtering attributes]
160
161\typebuffer[selector-001] \showCSSdemo{selector-001}{{[foo], [bar=foo]}} \page
162\typebuffer[selector-001] \showCSSdemo{selector-001}{{[bar\lettertilde=foo]}} \page
163\typebuffer[selector-001] \showCSSdemo{selector-001}{{[bar\letterhat="foo"]}} \page
164\typebuffer[selector-001] \showCSSdemo{selector-001}{{[whatever\lettertilde="five"]}} \page
165
166\stopchapter
167
168\startchapter[title=Combining methods]
169
170\typebuffer[selector-001] \showCSSdemo{selector-001}{{g f .one, g f .three}} \page
171\typebuffer[selector-001] \showCSSdemo{selector-001}{{g > f .one, g > f .three}} \page
172\typebuffer[selector-001] \showCSSdemo{selector-001}{{d + e}} \page
173\typebuffer[selector-001] \showCSSdemo{selector-001}{{d ~ e}} \page
174\typebuffer[selector-001] \showCSSdemo{selector-001}{{d ~ e, g f .one, g f .three}} \page
175
176\stopchapter
177
178% \startchapter[title=Negation]
179
180% \typebuffer[selector-001] \showCSSdemo{selector-001}{{:not([whatever\lettertilde="five"])}} \page
181% \typebuffer[selector-001] \showCSSdemo{selector-001}{{:not(d)}} \page
182
183\stopchapter
184
185\startchapter[title=Child selectors]
186
187\typebuffer[selector-001] \showCSSdemo{selector-001}{{a:nth-child(3)}} \page
188\typebuffer[selector-001] \showCSSdemo{selector-001}{{a:nth-last-child(3)}} \page
189\typebuffer[selector-001] \showCSSdemo{selector-001}{{g:nth-of-type(3)}} \page
190\typebuffer[selector-001] \showCSSdemo{selector-001}{{g:nth-last-of-type(3)}} \page
191\typebuffer[selector-001] \showCSSdemo{selector-001}{{a:first-child}} \page
192\typebuffer[selector-001] \showCSSdemo{selector-001}{{a:last-child}} \page
193\typebuffer[selector-001] \showCSSdemo{selector-001}{{e:first-of-type}} \page
194\typebuffer[selector-001] \showCSSdemo{selector-001}{{gg d:only-of-type}} \page
195
196\stopchapter
197
198\startchapter[title=Simple formulas]
199
200\typebuffer[selector-001] \showCSSdemo{selector-001}{{a:nth-child(even)}} \page
201\typebuffer[selector-001] \showCSSdemo{selector-001}{{a:nth-child(odd)}} \page
202\typebuffer[selector-001] \showCSSdemo{selector-001}{{a:nth-child(3n+1)}} \page
203\typebuffer[selector-001] \showCSSdemo{selector-001}{{a:nth-child(2n+3)}} \page
204
205\stopchapter
206
207\startchapter[title=Special cases]
208
209\typebuffer[selector-001] \showCSSdemo{selector-001}{{g:empty}} \page
210\typebuffer[selector-001] \showCSSdemo{selector-001}{{g:root}} \page
211\typebuffer[selector-001] \showCSSdemo{selector-001}{{*}} \page
212
213\stopchapter
214
215\startchapter[title=Combinations]
216
217\typebuffer[selector-001] \showCSSdemo{selector-001}{{g gg f .one}} \page
218\typebuffer[selector-001] \showCSSdemo{selector-001}{g/gg/f[@class='one']} \page
219\typebuffer[selector-001] \showCSSdemo{selector-001}{g/{gg f .one}} \page
220
221\stopchapter
222
223\startchapter[title=Comparison (1)]
224
225\typebuffer[selector-002] \showCSSdemo{selector-002}{{document title .one, document title .three}} \page
226\typebuffer[selector-002] \showCSSdemo{selector-002}{/document/title[(@class='one') or (@class='three')]} \page
227
228\stopchapter
229
230\startchapter[title=Comparison (2)]
231
232\typebuffer[selector-003] \showCSSdemo{selector-003}{{document title .one + subtitle, document title .two + subtitle}}
233
234{\em A combined filter triggers a sorting pass!}
235
236\stopchapter
237
238\stopdocument
239