Rule constructions

It is useful to know how CSS stylesheet rules are constructed in order to create an XSLT stylesheet from an existing CSS stylesheet. The selector can be more than just a single element name, in the same way that the Match attribute value on the Template element can be more complex than a simple element name, though in CSS the options are not as extensive. There is no expression language in CSS, just a small number of specific options.

Merging rules

The first major difference is that there may be multiple rules in CSS for a given element. The properties in each rule are simply added together. When properties are duplicated across rules, the last rule has precedence. In the following example, the H3 element will be displayed in blue, 14pt text, with a word spacing of 3pt:

H3 { color: green ; word-spacing: 3pt}


H3 { color: blue ; font-size: 14pt }

There is no equivalent of this in XSLT. All properties must be collected together into a single template (though variables can be used to partially emulate the effect).

Shared rules

A single rule can apply to more than one element (so avoiding unnecessary repetition). Element names are separated by commas. In the following example, the highest three header levels will all appear in green text:

H1, H2, H3 { color:green }

The equivalent XSLT expression would be:

match="H1|H2|H3"

Context elements

A rule may only apply to an element when that element occurs within another specified element. In the following example, only table titles adopt the given style:

TABLE TITLE { ... }

This example can be deceptive. It represents a TITLE element that may occur within other structures inside the TABLE element. The equivalent XSLT expression would be:

match="TABLE//TITLE"

A number of variants of this have been added in CSS 2, making use of the '>', '*' and '+' symbols.

The '>' symbol is used to indicate direct descendants:

TABLE > TITLE { ... }

This is clearly equivalent to the following:

match="TABLE/TITLE"

Another option is to use the '*' as a wildcard that represents at least one level between the two elements:

BOOK * TITLE { ... }

The way to replicate this in XSLT is two use '*' and '//':

match="BOOK/*//TITLE"

Finally, it is possible to identify elements that immediately follow other elements, such as an initial paragraph after a title, using '+':

TITLE + P { ... }

Attribute context

CSS 2 also allows context to depend on the presence and possibly the value of an attribute, using square brackets to enclose the attribute name, or name and value.

P[type] { ... }


P[type="secret"] { ... }

This is one case where XSLT requires little translation of syntax (though quotes may need to be changed, as shown below, depending on the quotes used for the Match attribute):

match="P[@type]"


match="P[@type='secret']"

However, apart from '=' to check that the attribute value matches a given value, it is also possible to use '!=' (not equals) and '~=' (given value must be present within the attribute value as a distinct word). The first of these is easily converted (unfortunately, the XPath expression language has no equivalent for the '~=' feature):

P[type!="secret"] { ... }

match="P[not(@type='secret')]"