A library for parsing, manipulating, and rendering css selectors (not css files,
just the selectors).
It has a quasiquoter to enable Haskell to validate the css selector at compile
One can furthermore calculate the specificity of a css-selector, and thus
perform an analysis over what css-selector will take precedence.
The package documentation can be found on the GitHub pages.
A css selector has the following structure:
SelectorGroup is a group of one or more
Selectors, these are
Selector is a custom linked list implementation where the "cons" (the
Combined data constructor) contains a besides a reference to a
PseudoSelectorSequence (head) and a
Selector (tail), it specifies what
PseudoSelectorCombinator is used. A
Selector has at least one
PseudoSelectorSequence, this is constructoed with the
PseudoSelectorSequence is a
Selector sequence with an optional
pseudo element is written at the end of the
PseudoSelectorSequence when specified in the CSS
SelectorSequence contains a
TypeSelector (in case the
Universal, this does not need to be part of the css-selector
expression); and a set of zero or more
SelectorFilter is a
PseudoClass, or a
- Both a
TypeSelector and an
AttributeName have a namespace. A namespace
can be any (
*), empty, or a namespace (which should be a valid
Hash is a valid identifier prepended with a number sign (
Class is a valid identifier prepended with a dot (
Attribute can be an
Exist object that imposes a constraint that the
attribute should exist for the given tag, or an
Attrib that specifies
that the attribute exists, and that the value for this attribute satisfies
a given constraint. This constraint is determined by the
AttributeCombinator and the value of the
Negation is written in a css selector with
:not(…). It can contain a
PseudoClass, it can not contain a nested
PseudoClass is an identifier after a single colon (
:). Some pseudo classes
are functions that are then called with a parameter. For the
:nth-of-type(…) these functions take an
Nth as parameter. This
parameter specifies which childs will be selected. The
:lang(…) pseudo class
takes the name of a language, for example
Nth describes what childs are selected, for example
4n+2, this is used as a function
parameter for the
NthOfType pseudo classes; and
PseudoElement is an optional item at the end of a
SelectorSequence. Usually pseudo elements are
written with two colons in front, for example
::after. For backwards compatibility,
these can also be written as
The main use of this package is a quasiquoter, that can be used both for
expressions and patterns. We thus can construct a
SelectorGroup in an
myCssSelector :: SelectorGroup
myCssSelector = [csssel|* html .pun .inbox, * html .pun #bdrdmain, * html .pun .infldset|]
A less common use case is using the quasiquoter in a pattern to check if a given
SelectorGroup matches exactly with a given css selector. For example:
isMyCssSelector :: SelectorGroup -> Bool
isMyCssSelector [csssel|* html .pun .unbox|] = True
isMyCssSelector _ = False
The quasiquoter can be used in a type signature as well, but will always,
regardless of the content, return the type for
SelectorGroup. If you use the
quasiquoter as a declaration, it will simply not generate any declarations. It
will raise a warning (not an error) about this.
Perhaps in the (far) future, we will make more sensical implementations for the
type and declaration part of the quasiquoter.
Note that you need to enable the
-XQuasiQuotes pragma when you compile.
One can turn equivalent css selectors in a "normalized" form. This is done by
Selectors in a
Selector group, and sorting the
of a certain
The order is determined by the default instances of
Ord of the sequences. This
is thus not an "inherent" ordering of the css selector, but just an order that
the program constructed to convert multiple css selectors that are equivalent
same to a normal form in which these are equal.
We here do not optimize the css selector, for example by removing duplicate
filters, since that can have impact on the specificity of the selector.
The specificity of a selector is defined by three numbers a, b and c.
Later, one calculates the specificity level with 100 a + 10 b + c. The higher
the specificity level, the more it takes precedence. If there are thus two
selectors and the former selector has 14 as specificity level, and the latter
has 42 as specificity level, then rules defined in the latter, will "overrule"
the rules defined in the former, given these rules "clash".
One can calculate the specificity of a item with as type a member of the
specificity :: ToCssSelector a => a -> Int
or you can obtain a more detailed result with:
specificity' :: ToCssSelector a => a -> SelectorSpecificity
The types that are members of the
ToCssSelector are members of the
use these in blaze HTML and for example in Hamlet.
ToMarkup instance will render the css selector as raw content. So if you
add this as an attribute, the css selector will appear, unescaped, in the
rendered page. Note that it will be escaped, so
foo > bar will be generated as
foo > bar.
ToJSON instance will convert the given object in a JSON string that
contains the css selector.
use this in hamlet, you generate a string that contains the css-selector. This
often strings are used to represent these.
Arbitrary css selectors
One can generate arbitrary CSS selectors (and their subcomponents). It is
however not advisable to use this for anything other than for validation
purposes (like with
The css-elements are all members of the
Binary typeclass converts the css selector to a compact binary format.
This is not standard format. This is more to write a css-selector to a
binary format and back.
css-elements are an instance of
Hashable as well, for example to use as
keys in a
css-selectors is not safe Haskell
There are not extensions that are used that make the library itself
unsafe, but it makes use of
blaze-markup, etc. and the packages are
not safe. Hence this package is not safe Haskell.
We want to implement an extra quasiquoter with the ability to specify variables,
that can then be used in expressions, or in patterns.
You can contribute by making a pull request on the GitHub
You can contact the package maintainer by sending a mail to
This package is dedicated in loving memory to my mother, Veerle Dumon
(1958-2019), in the hope that eventually it will be as stylish as she was.