Mojo::DOM::CSS(3pm)

1Mojo::DOM::CSS(3)     User Contributed Perl Documentation    Mojo::DOM::CSS(3)
2
3
4

NAME

6       Mojo::DOM::CSS - CSS selector engine
7

SYNOPSIS

9         use Mojo::DOM::CSS;
10
11         # Select elements from DOM tree
12         my $css = Mojo::DOM::CSS->new(tree => $tree);
13         my $elements = $css->select('h1, h2, h3');
14

DESCRIPTION

16       Mojo::DOM::CSS is the CSS selector engine used by Mojo::DOM, based on
17       the HTML Living Standard <https://html.spec.whatwg.org> and Selectors
18       Level 3 <http://www.w3.org/TR/css3-selectors/>.
19

SELECTORS

21       All CSS selectors that make sense for a standalone parser are
22       supported.
23
24   *
25       Any element.
26
27         my $all = $css->select('*');
28
29   E
30       An element of type "E".
31
32         my $title = $css->select('title');
33
34   E[foo]
35       An "E" element with a "foo" attribute.
36
37         my $links = $css->select('a[href]');
38
39   E[foo="bar"]
40       An "E" element whose "foo" attribute value is exactly equal to "bar".
41
42         my $case_sensitive = $css->select('input[type="hidden"]');
43         my $case_sensitive = $css->select('input[type=hidden]');
44
45   E[foo="bar" i]
46       An "E" element whose "foo" attribute value is exactly equal to any
47       (ASCII-range) case-permutation of "bar". Note that this selector is
48       EXPERIMENTAL and might change without warning!
49
50         my $case_insensitive = $css->select('input[type="hidden" i]');
51         my $case_insensitive = $css->select('input[type=hidden i]');
52         my $case_insensitive = $css->select('input[class~="foo" i]');
53
54       This selector is part of Selectors Level 4
55       <http://dev.w3.org/csswg/selectors-4>, which is still a work in
56       progress.
57
58   E[foo~="bar"]
59       An "E" element whose "foo" attribute value is a list of whitespace-
60       separated values, one of which is exactly equal to "bar".
61
62         my $foo = $css->select('input[class~="foo"]');
63         my $foo = $css->select('input[class~=foo]');
64
65   E[foo^="bar"]
66       An "E" element whose "foo" attribute value begins exactly with the
67       string "bar".
68
69         my $begins_with = $css->select('input[name^="f"]');
70         my $begins_with = $css->select('input[name^=f]');
71
72   E[foo$="bar"]
73       An "E" element whose "foo" attribute value ends exactly with the string
74       "bar".
75
76         my $ends_with = $css->select('input[name$="o"]');
77         my $ends_with = $css->select('input[name$=o]');
78
79   E[foo*="bar"]
80       An "E" element whose "foo" attribute value contains the substring
81       "bar".
82
83         my $contains = $css->select('input[name*="fo"]');
84         my $contains = $css->select('input[name*=fo]');
85
86   E[foo|="en"]
87       An "E" element whose "foo" attribute has a hyphen-separated list of
88       values beginning (from the left) with "en".
89
90         my $english = $css->select('link[hreflang|=en]');
91
92   E:root
93       An "E" element, root of the document.
94
95         my $root = $css->select(':root');
96
97   E:nth-child(n)
98       An "E" element, the "n-th" child of its parent.
99
100         my $third = $css->select('div:nth-child(3)');
101         my $odd   = $css->select('div:nth-child(odd)');
102         my $even  = $css->select('div:nth-child(even)');
103         my $top3  = $css->select('div:nth-child(-n+3)');
104
105   E:nth-last-child(n)
106       An "E" element, the "n-th" child of its parent, counting from the last
107       one.
108
109         my $third    = $css->select('div:nth-last-child(3)');
110         my $odd      = $css->select('div:nth-last-child(odd)');
111         my $even     = $css->select('div:nth-last-child(even)');
112         my $bottom3  = $css->select('div:nth-last-child(-n+3)');
113
114   E:nth-of-type(n)
115       An "E" element, the "n-th" sibling of its type.
116
117         my $third = $css->select('div:nth-of-type(3)');
118         my $odd   = $css->select('div:nth-of-type(odd)');
119         my $even  = $css->select('div:nth-of-type(even)');
120         my $top3  = $css->select('div:nth-of-type(-n+3)');
121
122   E:nth-last-of-type(n)
123       An "E" element, the "n-th" sibling of its type, counting from the last
124       one.
125
126         my $third    = $css->select('div:nth-last-of-type(3)');
127         my $odd      = $css->select('div:nth-last-of-type(odd)');
128         my $even     = $css->select('div:nth-last-of-type(even)');
129         my $bottom3  = $css->select('div:nth-last-of-type(-n+3)');
130
131   E:first-child
132       An "E" element, first child of its parent.
133
134         my $first = $css->select('div p:first-child');
135
136   E:last-child
137       An "E" element, last child of its parent.
138
139         my $last = $css->select('div p:last-child');
140
141   E:first-of-type
142       An "E" element, first sibling of its type.
143
144         my $first = $css->select('div p:first-of-type');
145
146   E:last-of-type
147       An "E" element, last sibling of its type.
148
149         my $last = $css->select('div p:last-of-type');
150
151   E:only-child
152       An "E" element, only child of its parent.
153
154         my $lonely = $css->select('div p:only-child');
155
156   E:only-of-type
157       An "E" element, only sibling of its type.
158
159         my $lonely = $css->select('div p:only-of-type');
160
161   E:empty
162       An "E" element that has no children (including text nodes).
163
164         my $empty = $css->select(':empty');
165
166   E:link
167       An "E" element being the source anchor of a hyperlink of which the
168       target is not yet visited (":link") or already visited (":visited").
169       Note that Mojo::DOM::CSS is not stateful, therefore ":link" and
170       ":visited" yield exactly the same results.
171
172         my $links = $css->select(':link');
173         my $links = $css->select(':visited');
174
175   E:visited
176       Alias for "E:link".
177
178   E:checked
179       A user interface element "E" which is checked (for instance a radio-
180       button or checkbox).
181
182         my $input = $css->select(':checked');
183
184   E.warning
185       An "E" element whose class is "warning".
186
187         my $warning = $css->select('div.warning');
188
189   E#myid
190       An "E" element with "ID" equal to "myid".
191
192         my $foo = $css->select('div#foo');
193
194   E:not(s1, s2)
195       An "E" element that does not match either compound selector "s1" or
196       compound selector "s2". Note that support for compound selectors is
197       EXPERIMENTAL and might change without warning!
198
199         my $others = $css->select('div p:not(:first-child, :last-child)');
200
201       Support for compound selectors was added as part of Selectors Level 4
202       <http://dev.w3.org/csswg/selectors-4>, which is still a work in
203       progress.
204
205   E:matches(s1, s2)
206       An "E" element that matches compound selector "s1" and/or compound
207       selector "s2". Note that this selector is EXPERIMENTAL and might change
208       without warning!
209
210         my $headers = $css->select(':matches(section, article, aside, nav) h1');
211
212       This selector is part of Selectors Level 4
213       <http://dev.w3.org/csswg/selectors-4>, which is still a work in
214       progress.
215
216   A|E
217       An "E" element that belongs to the namespace alias "A" from CSS
218       Namespaces Module Level 3 <https://www.w3.org/TR/css-namespaces-3/>.
219       Key/value pairs passed to selector methods are used to declare
220       namespace aliases.
221
222         my $elem = $css->select('lq|elem', lq => 'http://example.com/q-markup');
223
224       Using an empty alias searches for an element that belongs to no
225       namespace.
226
227         my $div = $c->select('|div');
228
229   E F
230       An "F" element descendant of an "E" element.
231
232         my $headlines = $css->select('div h1');
233
234   E > F
235       An "F" element child of an "E" element.
236
237         my $headlines = $css->select('html > body > div > h1');
238
239   E + F
240       An "F" element immediately preceded by an "E" element.
241
242         my $second = $css->select('h1 + h2');
243
244   E ~ F
245       An "F" element preceded by an "E" element.
246
247         my $second = $css->select('h1 ~ h2');
248
249   E, F, G
250       Elements of type "E", "F" and "G".
251
252         my $headlines = $css->select('h1, h2, h3');
253
254   E[foo=bar][bar=baz]
255       An "E" element whose attributes match all following attribute
256       selectors.
257
258         my $links = $css->select('a[foo^=b][foo$=ar]');
259

ATTRIBUTES

261       Mojo::DOM::CSS implements the following attributes.
262
263   tree
264         my $tree = $css->tree;
265         $css     = $css->tree(['root']);
266
267       Document Object Model. Note that this structure should only be used
268       very carefully since it is very dynamic.
269

METHODS

271       Mojo::DOM::CSS inherits all methods from Mojo::Base and implements the
272       following new ones.
273
274   matches
275         my $bool = $css->matches('head > title');
276         my $bool = $css->matches('svg|line', svg => 'http://www.w3.org/2000/svg');
277
278       Check if first node in "tree" matches the CSS selector. Trailing
279       key/value pairs can be used to declare xml namespace aliases.
280
281   select
282         my $results = $css->select('head > title');
283         my $results = $css->select('svg|line', svg => 'http://www.w3.org/2000/svg');
284
285       Run CSS selector against "tree". Trailing key/value pairs can be used
286       to declare xml namespace aliases.
287
288   select_one
289         my $result = $css->select_one('head > title');
290         my $result =
291           $css->select_one('svg|line', svg => 'http://www.w3.org/2000/svg');
292
293       Run CSS selector against "tree" and stop as soon as the first node
294       matched.  Trailing key/value pairs can be used to declare xml namespace
295       aliases.
296

NAME

SYNOPSIS

DESCRIPTION

SELECTORS

ATTRIBUTES

METHODS

SEE ALSO