XMetaL Tips and Tricks

XMetaL Community Forum XMetaL Tips and Tricks CSS: Understanding Cascading Rules for "counter-reset"

  • Derek Read

    CSS: Understanding Cascading Rules for "counter-reset"

    Participants 1
    Replies 0
    Last Activity 13 years, 11 months ago

    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 is encountered in the document.</p> <p><b>Example 1:</b><br />A style sheet containing the following will only reset the counter called “imagenum”:<br />[code]title {<br />  counter-reset: section;<br />  counter-reset: imagenum<br />}<br />[/code]<br />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.</p> <p><b>Example 2:</b><br />A style sheet containing the following will also only reset the counter called “imagenum”:<br />[code]title {<br />  counter-reset: section<br />}<br />title {<br />  counter-reset: imagenum<br />}[/code]<br />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.</p> <p><b>Solution:</b><br />To reset both counters they must be specified together within the same selector and on the same counter-reset property:<br />[code]title {<br />  counter-reset: section imagenum<br />}[/code]</p> <p><b>External References:</b></p> <ul></p> <li>W3C CSS2 (12.5 Automatic counters and numbering): <a href="http://www.w3.org/TR/REC-CSS2/generate.html#propdef-counter-reset" rel="nofollow">http://www.w3.org/TR/REC-CSS2/generate.html#propdef-counter-reset</a></li> <p></p> <li>W3C CSS2 (6 Assigning property values, Cascading, and Inheritance): <a href="http://www.w3.org/TR/REC-CSS2/cascade.html" rel="nofollow">http://www.w3.org/TR/REC-CSS2/cascade.html</a></li> <p></ul> <p>

    Reply

  • You must be logged in to reply to this topic.

Lost Your Password?

Products
Downloads
Support