stackoom
  简体   繁体   中英

CSS counter-increment with different scopes

 原文  2020-08-12 07:58:48  0   4    html/ css

Question

I need to create a continuous enumeration in different order list of the document.

The HTML is generated dynamically and cannot be modified.

I have the following structure and CSS: 

 body{ counter-reset: item; } ol { list-style-type: none; } ol.instructions:not(.continue){ counter-reset: item; } li::before { counter-increment: item; content: counter(item) "."; }
 <div class="col"> <ol class="instructions"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <ol class="instructions continue"> <li>item 4</li> <li>item 5</li> </ol> </div> <div class="col"> <ol class="instructions continue"> <li>item 6</li> <li>item 7</li> </ol> <ol class="instructions"> <li>item 8</li> <li>item 9</li> </ol> </div> <div class="col"> <ol class="instructions continue"> <li>item 10</li> <li>item 11</li> </ol> <ol class="instructions"> <li>item 12</li> <li>item 13</li> </ol> </div>

The selector .instructions starts a new count, but .instructions.continue must continue with previous counting.

The result should be:

1. item 1
2. item 2
3. item 3
4. item 4
5. item 5
6. item 6
7. item 7
1. item 8
2. item 9
3. item 10
4. item 11
1. item 12
2. item 13

4 answers

solution1
 1  2020-08-12 08:12:44

Please use all ol in col div. 

 body{ counter-reset: item; } ol { list-style-type: none; } ol.instructions:not(.continue){ counter-reset: item; } li::before { counter-increment: item; content: counter(item) "."; }
 <body> <div class="col"> <ol class="instructions"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <ol class="instructions continue"> <li>item 4</li> <li>item 5</li> </ol> <ol class="instructions continue"> <li>item 6</li> <li>item 7</li> </ol> <ol class="instructions"> <li>item 8</li> <li>item 9</li> </ol> <ol class="instructions continue"> <li>item 10</li> <li>item 11</li> </ol> <ol class="instructions"> <li>item 12</li> <li>item 13</li> </ol> </div> </body>

solution2
 1  2020-08-13 11:52:47

I find this possible solution preserving a general structure and global variables and selectors.

Thanks for all the comments and recommendations. I hope all the answers and comments help those with similar problems. 

 ol { list-style-type: none; } ol.instructions:not(.continue){ counter-reset: item; } ol.instructions.continue{ counter-reset: itemC var(--lastC); } ol.instructions.continue li::before { content: counter(itemC) "."; counter-increment: itemC; } li::before { content: counter(item) "."; counter-increment: item; }
 <div class="col"> <ol class="instructions"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <ol class="instructions continue" style="--lastC:3"> <li>item 4</li> <li>item 5</li> </ol> </div> <div class="col"> <ol class="instructions continue" style="--lastC:5"> <li>item 6</li> <li>item 7</li> </ol> <ol class="instructions"> <li>item 8</li> <li>item 9</li> </ol> </div> <div class="col"> <ol class="instructions continue" style="--lastC:2"> <li>item 10</li> <li>item 11</li> </ol> <ol class="instructions"> <li>item 12</li> <li>item 13</li> </ol> </div>

solution3
 0  2020-08-12 09:01:51

You should not reset the counter inside the ol

 body{ counter-reset: item; } ol { list-style-type: none; } ol.instructions:not(.continue){ /* counter-reset: item;*/ } li::before { counter-increment: item; content: counter(item) "."; }
 <div class="col"> <ol class="instructions"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <ol class="instructions continue"> <li>item 4</li> <li>item 5</li> </ol> </div> <div class="col"> <ol class="instructions continue"> <li>item 6</li> <li>item 7</li> </ol> <ol class="instructions"> <li>item 8</li> <li>item 9</li> </ol> </div> <div class="col"> <ol class="instructions continue"> <li>item 10</li> <li>item 11</li> </ol> <ol class="instructions"> <li>item 12</li> <li>item 13</li> </ol> </div>

You need to move your continue logic to col div 

 body{ counter-reset: item; } ol { list-style-type: none; }.col:not(.continue){ counter-reset: item; } li::before { counter-increment: item; content: counter(item) "."; }
 <div class="col"> <ol class="instructions"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <ol class="instructions "> <li>item 4</li> <li>item 5</li> </ol> </div> <div class="col continue"> <ol class="instructions "> <li>item 6</li> <li>item 7</li> </ol> <ol class="instructions"> <li>item 8</li> <li>item 9</li> </ol> </div> <div class="col continue"> <ol class="instructions "> <li>item 10</li> <li>item 11</li> </ol> <ol class="instructions"> <li>item 12</li> <li>item 13</li> </ol> </div> <div class="col"> <ol class="instructions "> <li>item 10</li> <li>item 11</li> </ol> <ol class="instructions"> <li>item 12</li> <li>item 13</li> </ol> </div>

solution4
 0  2020-08-12 09:16:12

I can't figure out a way to do it exactly with a single counter.

Here's a way using grouped counters: 

 body { counter-reset: group-one group-two group-three; } ol { list-style-type: none; }.group-one li::before { counter-increment: group-one; content: counter(group-one) "."; }.group-two li::before { counter-increment: group-two; content: counter(group-two) "."; }.group-three li::before { counter-increment: group-three; content: counter(group-three) "."; }
 <div class="col"> <ol class="instructions group-one"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <ol class="instructions group-one"> <li>item 4</li> <li>item 5</li> </ol> </div> <div class="col"> <ol class="instructions group-one"> <li>item 6</li> <li>item 7</li> </ol> <ol class="instructions group-two"> <li>item 8</li> <li>item 9</li> </ol> </div> <div class="col"> <ol class="instructions group-two"> <li>item 10</li> <li>item 11</li> </ol> <ol class="instructions group-three"> <li>item 12</li> <li>item 13</li> </ol> </div>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Issue with counter-increment in css CSS counter-increment not incrementing CSS “counter-increment” not incrementing CSS Counter-increment and counter-reset css counter-increment for section numbers counter-increment with formatting in html css CSS counter-increment is not working for nested div and h3 elements Why two counter-increment does not work in a css selector CSS counter-increment page on print view issue How to place a css counter-increment below a paragraph of text?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM