NAME
Mojo::DOM::CSS - CSS3 selector engine
SYNOPSIS
use Mojo::DOM::CSS;
# Select elements from DOM tree
my $css = Mojo::DOM::CSS->new(tree => $tree);
my $elements = $css->select('h1, h2, h3');
DESCRIPTION
Mojo::DOM::CSS is the CSS3 selector engine used by Mojo::DOM. Note that this module is EXPERIMENTAL and might change without warning!
SELECTORS
All CSS3 selectors that make sense for a standalone parser are supported.
*
Any element.
my $all = $css->select('*');
E
An element of type E
.
my $title = $css->select('title');
E[foo]
An E
element with a foo
attribute.
my $links = $css->select('a[href]');
E[foo="bar"]
An E
element whose foo
attribute value is exactly equal to bar
.
my $fields = $css->select('input[name="foo"]');
E[foo~="bar"]
An E
element whose foo
attribute value is a list of whitespace-separated values, one of which is exactly equal to bar
.
my $fields = $css->select('input[name~="foo"]');
E[foo^="bar"]
An E
element whose foo
attribute value begins exactly with the string bar
.
my $fields = $css->select('input[name^="f"]');
E[foo$="bar"]
An E
element whose foo
attribute value ends exactly with the string bar
.
my $fields = $css->select('input[name$="o"]');
E[foo*="bar"]
An E
element whose foo
attribute value contains the substring bar
.
my $fields = $css->select('input[name*="fo"]');
E:root
An E
element, root of the document.
my $root = $css->select(':root');
E:checked
A user interface element E
which is checked (for instance a radio-button or checkbox).
my $input = $css->select(':checked');
E:empty
An E
element that has no children (including text nodes).
my $empty = $css->select(':empty');
E:nth-child(n)
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)');
E:nth-last-child(n)
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)');
E:nth-of-type(n)
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)');
E:nth-last-of-type(n)
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)');
E:first-child
An E
element, first child of its parent.
my $first = $css->select('div p:first-child');
E:last-child
An E
element, last child of its parent.
my $last = $css->select('div p:last-child');
E:first-of-type
An E
element, first sibling of its type.
my $first = $css->select('div p:first-of-type');
E:last-of-type
An E
element, last sibling of its type.
my $last = $css->select('div p:last-of-type');
E:only-child
An E
element, only child of its parent.
my $lonely = $css->select('div p:only-child');
E:only-of-type
An E
element, only sibling of its type.
my $lonely = $css->select('div p:only-of-type');
E.warning
my $warning = $css->select('div.warning');
An E
element whose class is "warning".
E#myid
my $foo = $css->select('div#foo');
An E
element with ID
equal to "myid".
E:not(s)
An E
element that does not match simple selector s
.
my $others = $css->select('div p:not(:first-child)');
E F
An F
element descendant of an E
element.
my $headlines = $css->select('div h1');
E > F
An F
element child of an E
element.
my $headlines = $css->select('html > body > div > h1');
E + F
An F
element immediately preceded by an E
element.
my $second = $css->select('h1 + h2');
E ~ F
An F
element preceded by an E
element.
my $second = $css->select('h1 ~ h2');
E, F, G
Elements of type E
, F
and G
.
my $headlines = $css->select('h1, h2, h3');
E[foo=bar][bar=baz]
An E
element whose attributes match all following attribute selectors.
my $links = $css->select('a[foo^="b"][foo$="ar"]');
ATTRIBUTES
Mojo::DOM::CSS implements the following attributes.
tree
my $tree = $css->tree;
$css = $css->tree(['root', ['text', 'lalala']]);
Document Object Model.
METHODS
Mojo::DOM::CSS inherits all methods from Mojo::Base and implements the following new ones.
select
my $results = $css->select('head > title');
Run CSS3 selector against tree
.