CSS 3 Modules

Selectors 3

On RuleSet.selector, the as_css() method can be used to serialize a selector back to an Unicode string.

>>> import tinycss
>>> stylesheet = tinycss.make_parser().parse_stylesheet(
...     'div.error, #root > section:first-letter { color: red }')
>>> selector_string = stylesheet.rules[0].selector.as_css()
>>> selector_string
'div.error, #root > section:first-letter'

This string can be parsed by cssselect. The parsed objects have information about pseudo-elements and selector specificity.

>>> import cssselect
>>> selectors = cssselect.parse(selector_string)
>>> [s.specificity() for s in selectors]
[(0, 1, 1), (1, 0, 2)]
>>> [s.pseudo_element for s in selectors]
[None, 'first-letter']

These objects can in turn be translated to XPath expressions. Note that the translation ignores pseudo-elements, you have to account for them somehow or reject selectors with pseudo-elements.

>>> xpath = cssselect.HTMLTranslator().selector_to_xpath(selectors[1])
>>> xpath
"descendant-or-self::*[@id = 'root']/section"

Finally, the XPath expressions can be used with lxml to find the matching elements.

>>> from lxml import etree
>>> compiled_selector = etree.XPath(xpath)
>>> document = etree.fromstring('''<section id="root">
...   <section id="head">Title</section>
...   <section id="content">
...     Lorem <section id="sub-section">ipsum</section>
...   </section>
... </section>''')
>>> [el.get('id') for el in compiled_selector(document)]
['head', 'content']

Find more details in the cssselect documentation.

Color 3

This module implements parsing for the <color> values, as defined in CSS 3 Color.

The (deprecated) CSS2 system colors are not supported, but you can easily test for them if you want as they are simple IDENT tokens. For example:

if token.type == 'IDENT' and token.value == 'ButtonText':
    return ...

All other values types are supported:

• Basic, extended (X11) and transparent color keywords;
• 3-digit and 6-digit hexadecimal notations;
• rgb(), rgba(), hsl() and hsla() functional notations.
• currentColor

This module does not integrate with a parser class. Instead, it provides a function that can parse tokens as found in css21.Declaration.value, for example.

tinycss.color3.parse_color(token)

Parse single token as a color value.

Parameters:token – A single Token or ContainerToken, as found eg. in a property value. Returns:

• None, if the token is not a valid CSS 3 color value. (No exception is raised.)
• For the currentColor keyword: the string 'currentColor'
• Every other values (including keywords, HSL and HSLA) is converted to RGBA and returned as an RGBA object (a 4-tuple with attribute access). The alpha channel is clipped to [0, 1], but R, G, or B can be out of range (eg. rgb(-51, 306, 0) is represented as (-.2, 1.2, 0, 1).)

tinycss.color3.parse_color_string(css_string)

Parse a CSS string as a color value.

This is a convenience wrapper around parse_color() in case you have a string that is not from a CSS stylesheet.

Parameters:css_string – An unicode string in CSS syntax. Returns:Same as parse_color().

class tinycss.color3.RGBA

An RGBA color.

A tuple of four floats in the 0..1 range: (r, g, b, a). Also has red, green, blue and alpha attributes to access the same values.

Paged Media 3

class tinycss.page3.CSSPage3Parser

Extend CSS21Parser for CSS 3 Paged Media syntax.

Compared to CSS 2.1, the at_rules and selector attributes of PageRule objects are modified:

• at_rules is not always empty, it is a list of MarginRule objects.
• selector, instead of a single string, is a tuple of the page name and the pseudo class. Each of these may be a None or a string.

CSS	Parsed selectors
@page {} @page :first {} @page chapter {} @page table:right {}	(None, None) (None, 'first') ('chapter', None) ('table', 'right')

class tinycss.page3.MarginRule(at_keyword, declarations, line, column)

A parsed at-rule for margin box.

at_keyword

One of the 16 following strings:

• @top-left-corner
• @top-left
• @top-center
• @top-right
• @top-right-corner
• @bottom-left-corner
• @bottom-left
• @bottom-center
• @bottom-right
• @bottom-right-corner
• @left-top
• @left-middle
• @left-bottom
• @right-top
• @right-middle
• @right-bottom

declarations

A list of Declaration objects.

line

Source line where this was read.

column

Source column where this was read.

Other CSS modules

To add support for new CSS syntax, see Extending the parser.