I have div tags with span tag. How to add numbered list for the div tag using classname in CSS or JavaScript

<div id="editsum">
    <div class="esum"><span id="1430568488933" class="tbold">nde</span></div>
    <div class="esum"><span id="1430568576033" class="tbold">ca</span></div>
    <div class="esum"><span id="1430568582173" class="tdel">tim</span></div>
    <div class="esum"><span id="1430568582173" class="tins">Ó</span></div>
    <div class="esum"><span id="1430914284123" class="tdel">non</span></div>
    <div class="esum"><span id="1430914309275" class="tdel">cu</span></div>
</div>

I have div tags with span tag. How to add numbered list for the div tag using classname in CSS or JavaScript

<div id="editsum">
    <div class="esum"><span id="1430568488933" class="tbold">nde</span></div>
    <div class="esum"><span id="1430568576033" class="tbold">ca</span></div>
    <div class="esum"><span id="1430568582173" class="tdel">tim</span></div>
    <div class="esum"><span id="1430568582173" class="tins">Ó</span></div>
    <div class="esum"><span id="1430914284123" class="tdel">non</span></div>
    <div class="esum"><span id="1430914309275" class="tdel">cu</span></div>
</div>

• javascript
• css
• css-counter

• I don't understant what you want. Can you edit your question with an example ? (and maybe a JSFiddle) – Seblor Commented May 11, 2015 at 8:01
• Why not put a list around it? <ol><li><div><span></span></div></li><li>...</li></ol> – Krycke Commented May 11, 2015 at 8:02
• jsfiddle/arunpjohny/72071kaf/1 – Arun P Johny Commented May 11, 2015 at 8:04
• Not possible to change anything in HTML file. This is client requirement. – Smila Commented May 11, 2015 at 9:41

2 Answers 2

If you want to output a numbered list, the best approach is to make use of <ol> tags but if you can't modify your HTML and still need to output as a numbered list, you can make use of CSS counters to achieve the numbered list behavior.

body {
  counter-reset: esum;
}
.esum {
  position: relative;
  counter-increment: esum;
  padding: 10px;
}
.esum:before {
  content: counter(esum)".";
}

<div class="esum"><span id="1430568488933" class="tbold">nde</span>
</div>
<div class="esum"><span id="1430568576033" class="tbold">ca</span>
</div>
<div class="esum"><span id="1430568582173" class="tdel">tim</span>
</div>
<div class="esum"><span id="1430568582173" class="tins">Ó</span>
</div>
<div class="esum"><span id="1430914284123" class="tdel">non</span>
</div>
<div class="esum"><span id="1430914309275" class="tdel">cu</span>
</div>

CSS

.esum {
  display: list-item;
  margin-left: 1.5em;
  list-style-type: decimal;
}

Add the above CSS to you CSS File

DEMO