CODEWITHSUNDEEP
htmlcss
andy watson
andy watson

Reputation: 29

How to have a dynamic ordered list in html?

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

Upvotes: 1

Views: 660

Answers (1)

Alex
Alex

Reputation: 2780

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.

Upvotes: 1

Related Questions