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.

SEE ALSO

Mojolicious, Mojolicious::Guides, http://mojolicio.us.