Pages: 1
Print
Author Topic: CSS: Understanding Cascading Rules for "counter-reset"  (Read 2576 times)
Derek Read
Program Manager (XMetaL)
Administrator
Member

Posts: 1548



WWW
« on: October 31, 2008, 03:32:55 PM »

Product(s):
XMetaL Author 2.0+ and XMAX 4.0+

Description:
XMetaL Author uses standard W3C CSS "cascading rules" so becoming familar with those rules will help greatly when designing complex CSS files for displaying XML documents in XMetaL Author and XMAX. However, these rules can be fairly complicated and can be confusing when it comes to counters and numbering, particularly when it comes to the counter-reset property.

Notes:
  • The CSS referred to here is that which affects TagsOn view and Normal view (the two main editing views) only.
  • The "!important" CSS keyword is not recognized by XMetaL Author and XMAX but all other CSS2 cascading rules are.

Suppose you have set two different counters in your CSS and you want them both to be reset whenever an element called <title> is encountered in the document.

Example 1:
A style sheet containing the following will only reset the counter called "imagenum":
Code:
title {
  counter-reset: section;
  counter-reset: imagenum
}
In this first case the second counter-reset property (imagenum) simply overrides the first one (section) because only the last property in any given selector is used.

Example 2:
A style sheet containing the following will also only reset the counter called "imagenum":
Code:
title {
  counter-reset: section
}
title {
  counter-reset: imagenum
}
In this second case, duplicate properties in the second selector override those in the previous selector because the second selector is just as specific (but not more specific) as the first one.

Solution:
To reset both counters they must be specified together within the same selector and on the same counter-reset property:
Code:
title {
  counter-reset: section imagenum
}

External References:
« Last Edit: October 31, 2008, 05:11:55 PM by derekread » Logged
Pages: 1
Print
Jump to: