Rand Stats



Build Status

[Raku CSS Project] / [CSS-Selector-To-XPath]


CSS::Selector::To::XPath - Raku CSS Selector to XPath compiler


use CSS::Selector::To::XPath;
my $c2x = CSS::Selector::To::XPath.new;
say $c2x.query-to-xpath('li#main');
# //li[@id='main']

# functional interface
use CSS::Selector::To::XPath :selector-to-xpath;
my $xpath = selector-to-xpath: :css<div.foo>;
# //div[contains(concat(' ', @class, ' '), ' foo ')]

my $relative = selector-to-xpath: :css<div.foo>, :relative;
# ./div[contains(concat(' ', @class, ' '), ' foo ')]

my $ns = selector-to-xpath: :css<div.foo>, :prefix<xhtml>;
# //xhtml:div[contains(concat(' ', @class, ' '), ' foo ')]


CSS::Selector::To::XPath is a utility function to compile the full set of CSS2 and partial set CSS3 selectors to equivalent XPath expressions.



This module has built-in support for only the following Pseudo Classes:

:checked :disabled :empty :first-child :first-of-type :last-child :last-of-type :only-child :only-of-type :root :selected

In particular, the following dynamic pseudo classes DO NOT have a default definition:

:link :visited :hover :active :focus

This is because they are UI independant and do not have a standard XPath function

Defining Custom Pseudo Classes

Additional pseudo classes mapping can be defined by adding them to the global %PSEUDO-CLASSES variable or to the .pseudo-classes() Hash accessor:

use CSS::Selector::To::XPath :%PSEUDO-CLASSES;
# set-up a global xpath mapping
%PSEUDO-CLASSES<visited> = 'my-visited-func(.)';
# set-up a mapping on an object instance
my CSS::Selector::To::XPath $to-xml .= new;
$to-xml.pseudo-classes<visited> = 'my-visited-func(.)';

say $to-xml.selector-to-xpath: :css('a:visited');
# //a[my-visited-func(.)]

In the above example my-visited-func() needs to be implemented as a custom function in the XPath processor.

Fallback Pseudo Classes and Functions

This is an additional mechanism for both pseudo classes and functions is to set the :fallback option. This will map all unknown psuedos to a fallback xpath function. The default arguments to the function are (name, ., arg1, arg2, ...) where name is the name of the psuedo (lowercase), . is the current node and arg1, arg2, ... are any arguments that have been passed to pseudo functions.

use CSS::Selector::To::XPath;
my CSS::Selector::To::XPath $to-xml .= new(:fallback<pseudo>);
say $to-xml.selector-to-xpath: :css('a:visited:color("blue")');
# /a[pseudo('visited', .)][pseudo('color', ., 'blue')]

The fallback function may need to be implemented as a custom function in the XPath processor.

Mini Tutorial on CSS Selectors


Selectors can match elements using any of the following criteria:

When using a combination of the above, the element name comes first followed by identifier, class names, attributes, pseudo classes and negation in any order. Do not separate these parts with spaces! Space separation is used for descendant selectors.

For example:


The matched element must be of type form and have the class login. It may have other classes, but the class login is required to match. It must also have an attribute called action with the value /login.

This selector will match the following element:

form class="login form" method="post" action="/login"

but will not match the element:

form method="post" action="/logout"

Attribute Values

Several operators are supported for matching attributes:

For example, the following two selectors match the same element:

#my_id [id=my_id]

and so do the following two selectors:

.my_class [class~=my_class]

Alternatives, siblings, children

Complex selectors use a combination of expressions to match elements:

Since children and sibling selectors may match more than one element given the first element, the #match method may return more than one match.

Pseudo classes Pseudo classes were introduced in CSS 3. They are most often used to select elements in a given position:

Pseudo functions

For example:

table tr:nth-child(odd) Selects every second row in the table starting with the first one.

div p:nth-child(4) Selects the fourth paragraph in the div, but not if the div contains other elements, since those are also counted.

div p:nth-of-type(4) Selects the fourth paragraph in the div, counting only paragraphs, and ignoring all other elements.

div p:nth-of-type(-n+4) Selects the first four paragraphs, ignoring all others.

And you can always select an element that matches one set of rules but not another using :not. For example:

p:not(.post) Matches all paragraphs that do not have the class .post.


This Raku module is based on tests from the Perl 5 HTML::Selector::XPath module. Some rules have been derived from the notogiri Ruby gem.

Material for the 'Mini Tutorial on CSS Selectors' has been adapted from https://www.rubydoc.info/docs/rails/4.1.7/HTML/Selector.




This library is free software; you can redistribute it and/or modify it under the same terms as Rakudo itself.