Mojo::DOM::CSS − CSS selector engine
use
Mojo::DOM::CSS;
# Select elements from DOM tree
my $css = Mojo::DOM::CSS−>new(tree => $tree);
my $elements = $css−>select('h1, h2, h3');
Mojo::DOM::CSS is the CSS selector engine used by Mojo::DOM, based on the HTML Living Standard <https://html.spec.whatwg.org> and Selectors Level 3 <https://www.w3.org/TR/css3-selectors/>.
All CSS selectors that make sense for a standalone parser are supported.
Any element.
my $all = $css−>select('*');
An element of type "E".
my $title = $css−>select('title');
An "E" element with a "foo" attribute.
my $links = $css−>select('a[href]');
An "E" element whose "foo" attribute value is exactly equal to "bar".
my
$case_sensitive =
$css−>select('input[type="hidden"]');
my $case_sensitive =
$css−>select('input[type=hidden]');
An "E" element whose "foo" attribute value is exactly equal to any (ASCII-range) case-permutation of "bar". Note that this selector is EXPERIMENTAL and might change without warning!
my
$case_insensitive =
$css−>select('input[type="hidden" i]');
my $case_insensitive =
$css−>select('input[type=hidden i]');
my $case_insensitive =
$css−>select('input[class˜="foo"
i]');
This selector is part of Selectors Level 4 <https://dev.w3.org/csswg/selectors-4>, which is still a work in progress.
An "E" element whose "foo" attribute value is exactly and case-sensitively equal to "bar". Note that this selector is EXPERIMENTAL and might change without warning!
my $case_sensitive = $css−>select('input[type="hidden" s]');
This selector is part of Selectors Level 4 <https://dev.w3.org/csswg/selectors-4>, which is still a work in progress.
An "E" element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar".
my $foo =
$css−>select('input[class˜="foo"]');
my $foo =
$css−>select('input[class˜=foo]');
An "E" element whose "foo" attribute value begins exactly with the string "bar".
my $begins_with
= $css−>select('input[nameˆ="f"]');
my $begins_with =
$css−>select('input[nameˆ=f]');
An "E" element whose "foo" attribute value ends exactly with the string "bar".
my $ends_with =
$css−>select('input[name$="o"]');
my $ends_with = $css−>select('input[name$=o]');
An "E" element whose "foo" attribute value contains the substring "bar".
my $contains =
$css−>select('input[name*="fo"]');
my $contains = $css−>select('input[name*=fo]');
An "E" element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en".
my $english = $css−>select('link[hreflang|=en]');
An "E" element, root of the document.
my $root = $css−>select(':root');
An "E" element, the "n−th" child of its parent.
my $third =
$css−>select('div:nth−child(3)');
my $odd = $css−>select('div:nth−child(odd)');
my $even =
$css−>select('div:nth−child(even)');
my $top3 =
$css−>select('div:nth−child(−n+3)');
An "E" element, the "n−th" child of its parent, counting from the last one.
my $third =
$css−>select('div:nth−last−child(3)');
my $odd =
$css−>select('div:nth−last−child(odd)');
my $even =
$css−>select('div:nth−last−child(even)');
my $bottom3 =
$css−>select('div:nth−last−child(−n+3)');
An "E" element, the "n−th" sibling of its type.
my $third =
$css−>select('div:nth−of−type(3)');
my $odd =
$css−>select('div:nth−of−type(odd)');
my $even =
$css−>select('div:nth−of−type(even)');
my $top3 =
$css−>select('div:nth−of−type(−n+3)');
An "E" element, the "n−th" sibling of its type, counting from the last one.
my $third =
$css−>select('div:nth−last−of−type(3)');
my $odd =
$css−>select('div:nth−last−of−type(odd)');
my $even =
$css−>select('div:nth−last−of−type(even)');
my $bottom3 =
$css−>select('div:nth−last−of−type(−n+3)');
An "E" element, first child of its parent.
my $first = $css−>select('div p:first−child');
An "E" element, last child of its parent.
my $last = $css−>select('div p:last−child');
An "E" element, first sibling of its type.
my $first = $css−>select('div p:first−of−type');
An "E" element, last sibling of its type.
my $last = $css−>select('div p:last−of−type');
An "E" element, only child of its parent.
my $lonely = $css−>select('div p:only−child');
An "E" element, only sibling of its type.
my $lonely = $css−>select('div p:only−of−type');
An "E" element that has no children (including text nodes).
my $empty = $css−>select(':empty');
Alias for "E:link". Note that this selector is EXPERIMENTAL and might change without warning! This selector is part of Selectors Level 4 <https://dev.w3.org/csswg/selectors-4>, which is still a work in progress.
An "E" element being the source anchor of a hyperlink of which the target is not yet visited (":link") or already visited (":visited"). Note that Mojo::DOM::CSS is not stateful, therefore ":any−link", ":link" and ":visited" yield exactly the same results.
my $links =
$css−>select(':any−link');
my $links = $css−>select(':link');
my $links = $css−>select(':visited');
Alias for "E:link".
An "E" element being a designated reference element. Note that this selector is EXPERIMENTAL and might change without warning!
my $scoped =
$css−>select('a:not(:scope > a)');
my $scoped = $css−>select('div :scope p');
my $scoped = $css−>select('˜ p');
This selector is part of Selectors Level 4 <https://dev.w3.org/csswg/selectors-4>, which is still a work in progress.
A user interface element "E" which is checked (for instance a radio-button or checkbox).
my $input = $css−>select(':checked');
An "E" element whose class is "warning".
my $warning = $css−>select('div.warning');
An "E" element with "ID" equal to "myid".
my $foo = $css−>select('div#foo');
An "E" element that does not match either compound selector "s1" or compound selector "s2". Note that support for compound selectors is EXPERIMENTAL and might change without warning!
my $others = $css−>select('div p:not(:first−child, :last−child)');
Support for compound selectors was added as part of Selectors Level 4 <https://dev.w3.org/csswg/selectors-4>, which is still a work in progress.
An "E" element that matches compound selector "s1" and/or compound selector "s2". Note that this selector is EXPERIMENTAL and might change without warning!
my $headers = $css−>select(':is(section, article, aside, nav) h1');
This selector is part of Selectors Level 4 <https://dev.w3.org/csswg/selectors-4>, which is still a work in progress.
An "E" element, if either of the relative selectors "rs1" or "rs2", when evaluated with "E" as the :scope elements, match an element. Note that this selector is EXPERIMENTAL and might change without warning!
my $link = $css−>select('a:has(> img)');
This selector is part of Selectors Level 4 <https://dev.w3.org/csswg/selectors-4>, which is still a work in progress. Also be aware that this feature is currently marked "at−risk", so there is a high chance that it will get removed completely.
An "E" element containing text content that substring matches "string_or_regex" case-insensitively or that regex matches "string_or_regex". For regular expressions use the format :text(/.../). Note that this selector is EXPERIMENTAL and might change without warning!
# Substring
match
my $login = $css−>select(':text(Log in)');
# Regex match
my $login = $css−>select(':text(/Log ?in/)');
# Regex match (case−insensitive)
my $login = $css−>select(':text(/(?i:Log
?in)/)');
This is a custom selector for Mojo::DOM and not part of any spec.
An "E" element that belongs to the namespace alias "A" from CSS Namespaces Module Level 3 <https://www.w3.org/TR/css-namespaces-3/>. Key/value pairs passed to selector methods are used to declare namespace aliases.
my $elem = $css−>select('lq|elem', lq => 'http://example.com/q−markup');
Using an empty alias searches for an element that belongs to no namespace.
my $div = $c−>select('|div');
An "F" element descendant of an "E" element.
my $headlines = $css−>select('div h1');
An "F" element child of an "E" element.
my $headlines = $css−>select('html > body > div > h1');
An "F" element immediately preceded by an "E" element.
my $second = $css−>select('h1 + h2');
An "F" element preceded by an "E" element.
my $second = $css−>select('h1 ˜ h2');
Elements of type "E", "F" and "G".
my $headlines = $css−>select('h1, h2, h3');
An "E" element whose attributes match all following attribute selectors.
my $links = $css−>select('a[fooˆ=b][foo$=ar]');
Mojo::DOM::CSS implements the following attributes.
my $tree =
$css−>tree;
$css = $css−>tree(['root']);
Document Object Model. Note that this structure should only be used very carefully since it is very dynamic.
Mojo::DOM::CSS inherits all methods from Mojo::Base and implements the following new ones.
my $bool =
$css−>matches('head > title');
my $bool = $css−>matches('svg|line', svg =>
'http://www.w3.org/2000/svg');
Check if first node in "tree" matches the CSS selector. Trailing key/value pairs can be used to declare xml namespace aliases.
my $results =
$css−>select('head > title');
my $results = $css−>select('svg|line', svg =>
'http://www.w3.org/2000/svg');
Run CSS selector against "tree". Trailing key/value pairs can be used to declare xml namespace aliases.
my $result =
$css−>select_one('head > title');
my $result =
$css−>select_one('svg|line', svg =>
'http://www.w3.org/2000/svg');
Run CSS selector against "tree" and stop as soon as the first node matched. Trailing key/value pairs can be used to declare xml namespace aliases.
You can set the "MOJO_DOM_CSS_DEBUG" environment variable to get some advanced diagnostics information printed to "STDERR".
MOJO_DOM_CSS_DEBUG=1
Mojolicious, Mojolicious::Guides, <https://mojolicious.org>.