1

I need to have a dynamic ordered list in html. I have a website that I want to comment on from time to time. My comments are ordered list. For example my today's comment sould be this:

A1. xxxxxx

A2. yyyyyy

and my tomorrow's comment sould be:

B1. xxxxxx

B2. yyyyyy

and so on.

How can I have a piece of html code to create this list dynamically and I don't have to change the letters manually every time?

I found this:

<span class="arial-2">
   <style>.C1 ol { counter-reset: item; margin-left: 0; padding-left: 0; margin-right:0;padding-right: 0; } .C1 ol > li { display: block; margin-bottom: .5em; margin-left: 2.5em; } 
.C1 ol > li::before { display: inline-block; content: "A" counter(item) ". "; counter-increment:item; width: 2.5em; margin-left: -2.5em;}
   </style>
   <div class="C1">
       <ol>
         <li>Sample 1</li>
         <li>Sample 2</li> 
       </ol>
   </div>
</span>

Which results in:

   A1.  Sample 1
   A2.  Sample 2

But when I add another similar piece of this code as the second comment after this and change the letter of "content" to "B" like this:

<span class="arial-2">
   <style>.C1 ol { counter-reset: item; margin-left: 0; padding-left: 0; margin-right:0;padding-right: 0; } .C1 ol > li { display: block; margin-bottom: .5em; margin-left: 2.5em; } 
.C1 ol > li::before { display: inline-block; content: "A" counter(item) ". "; counter-increment:item; width: 2.5em; margin-left: -2.5em;}
   </style>
   <div class="C1">
       <ol>
         <li>Sample 1</li>
         <li>Sample 2</li> 
       </ol>
   </div>
</span>

<span class="arial-2">
   <style>.C1 ol { counter-reset: item; margin-left: 0; padding-left: 0; margin-right:0;padding-right: 0; } .C1 ol > li { display: block; margin-bottom: .5em; margin-left: 2.5em; } 
.C1 ol > li::before { display: inline-block; content: "B" counter(item) ". "; counter-increment:item; width: 2.5em; margin-left: -2.5em;}
   </style>
   <div class="C1">
       <ol>
         <li>Sample 1</li>
         <li>Sample 2</li> 
       </ol>
   </div>
</span>

The result is :

B1. Sample 1
B2. Sample 2


B1. Sample 1 
B2. Sample 2

As you see both numbers are "B", while I expect something like this:

A1. Sample 1
A2. Sample 2


B1. Sample 1
B2. Sample 2

Would you please help me to figure out what the problem is?

Thanks in advance

Andre Nevares
  • 711
  • 6
  • 21
andy watson
  • 29
  • 3

1 Answers1

1

The CSS from the second block is overriding the CSS from the first block and applying the counter as B in both cases.

You will need to add some specificity in there, most likely with a differently named counter or wrapper class.

Alex
  • 2,651
  • 2
  • 25
  • 45
  • Many thanks for your help and reply. I want to know how we can confine the style to a particular div (without changing the style names). I did a quick search and found that "style" used to have an attribute called "scoped"; but it no longer exist. I also found "iframe". But that won't work. Is there any simple solution for this? – andy watson Jun 11 '20 at 05:28
  • No I'm afraid not, there is no such thing as encapsulation in CSS without using a selector or inlining the styles. You could move the styles inline directly onto the li and then inherit the parent styles, in this case content for the pseudo 'before'. See here: https://stackoverflow.com/a/57990239/1528308 – Alex Jun 11 '20 at 13:08