Continuing CSS counter numbering on two levels
Posted: Tue Apr 18, 2023 11:12 am
Hi,
I'm trying to write a CSS for an oXygen authoring framework for a customer DTD where I have nested lists like so:
A. Item 1
(1) Subitem 1
(2) Subitem 2
B. Item 2
(1) Subitem 3
(2) Subitem 4
Normally, a new list on either level will reset the list item counter, like above. However, if I set an attribute on the first list item of a level, the counter numbering should continue from the previous list on the same level:
A. Item 1
(1) Subitem 1
(2) Subitem 2
B. Item 2
(3) Subitem 3 (cont="1")
(4) Subitem 4
The relevant CSS looks like this (with additional counter resets outside this:
For list1, this works just fine. For the nested list2, however, I can't make the numbering continue, it will simply reset again. I've attached a complete XML and associated CSS.
I'm not sure if I am doing something wrong or if there is a bug of some description. The former is not entirely unlikely - CSS is not my first language.
As always, many thanks for a great editor!
Best.,
/Ari
I'm trying to write a CSS for an oXygen authoring framework for a customer DTD where I have nested lists like so:
A. Item 1
(1) Subitem 1
(2) Subitem 2
B. Item 2
(1) Subitem 3
(2) Subitem 4
Code: Select all
<list1>
<l1item>
<para>Item 1</para>
<list2>
<l2item>
<para>Subitem 1</para>
</l2item>
<l2item>
<para>Subitem 2</para>
</l2item>
</list2>
</l1item>
<l1item>
<para>Item 2</para>
<list2>
<l2item>
<para>Subitem 3</para>
</l2item>
<l2item>
<para>Subitem 4</para>
</l2item>
</list2>
</l1item>
</list1>
Code: Select all
cont="1"
A. Item 1
(1) Subitem 1
(2) Subitem 2
B. Item 2
(3) Subitem 3 (cont="1")
(4) Subitem 4
Code: Select all
<list1>
<l1item>
<para>Item 1</para>
<list2>
<l2item>
<para>Subitem 1</para>
</l2item>
<l2item>
<para>Subitem 2</para>
</l2item>
</list2>
</l1item>
<l1item>
<para>Item 2</para>
<list2>
<l2item cont="1">
<para>Subitem 3</para>
</l2item>
<l2item>
<para>Subitem 4</para>
</l2item>
</list2>
</l1item>
</list1>
Code: Select all
list1:has(l1item:first-of-type:not([cont="1"])) {
counter-reset: level1;
}
l1item:before {
counter-increment: level1;
content: counter(level1, upper-alpha) " ";
}
/* list2 */
list2:has(l2item:not([cont="1"]):first-of-type) {
counter-reset: level2;
}
l2item:before {
counter-increment: level2;
content: "(" counter(level2) ") ";
}
I'm not sure if I am doing something wrong or if there is a bug of some description. The former is not entirely unlikely - CSS is not my first language.
As always, many thanks for a great editor!
Best.,
/Ari