Advanced Styling

Advanced CSS styling concepts such as using XPath and pseudo elements.

Using XPath in CSS

You can collect and process the document contents using XPath, directly from CSS. The following example counts the words from a section and shows it in a static text after the section:

section:after {
  contents: "Number of words: " 
            oxy_xpath("count(tokenize(normalize-space(string-join(text(), '')), ' '))";
}

All the standard XPath 2.0 functions are supported.

Multiple :before and :after Pseudo Elements

Although not standard, this extension may come in very handy if you want to style sections from static content. To add static content to an element, you would normally use a :before or :after pseudo element.

This example adds static text before the title ("Chapter 1", "Chapter 2", etc.):

h1:before {
  content: "Chapter " counter(chapter) ".";
  color: blue;
}

All of this is styled with the same color, blue in this example. Using standard CSS, it is impossible to style just the chapter number with a larger font and with red, for example. However, you can do it using multiple before pseudo elements:

h1:before(3) {
  content: "Chapter ";
  color: blue;
}
h1:before(2) {
  content: counter(chapter);
  color: red;
  font-size: large;
}
h1:before(1) {
  content: ".";
  color: blue;
}
Note: The bigger the level, the more distant the pseudo element is.
Note: Level 1 corresponds to normal :before or :after.