displaying index of div using css

Question

I have a bunch of divs like this

<div id="parentDiv">
    <div class="childDiv">some content</div>
    <div class="childDiv">some content</div>
    <div class="childDiv">some content</div>
</div>

is there some way using only CSS that I could show the current index to the left of the childDiv elements and it automatically update if I were to shuffle them around using jQuery or would I have to to manipulate the child div using jquery ?

Or One of the other ways I was thinking to handle it would be to change them to ol li but then I need them to be zero based and I haven't see any thing in css to do that either

heh don't know how that happend thanks for the edit @George

mcgrailm
– mcgrailm

2015-03-22 20:08:48 +00:00
Commented Mar 22, 2015 at 20:08 — mcgrailm
– mcgrailm, Commented Mar 22, 2015 at 20:08
though I'm curious why the down vote

mcgrailm
– mcgrailm

2015-03-22 20:09:12 +00:00
Commented Mar 22, 2015 at 20:09 — mcgrailm
– mcgrailm, Commented Mar 22, 2015 at 20:09
you have to use js/jquery to edit html to show index value

Medda86
– Medda86

2015-03-22 20:10:01 +00:00
Commented Mar 22, 2015 at 20:10 — Medda86
– Medda86, Commented Mar 22, 2015 at 20:10

Oriol · Accepted Answer · 2015-03-22 20:11:08Z

3

You can use CSS counters:

#parentDiv {
  counter-reset: index; /* Create a `index` counter scope */
}
.childDiv:before {
  content: counter(index) ". "; /* Display `index` counter */
  counter-increment: index; /* Add 1 to `index` */
}

<div id="parentDiv">
  <div class="childDiv">some content</div>
  <div class="childDiv">some content</div>
  <div class="childDiv">some content</div>
</div>

answered Mar 22, 2015 at 20:11

Oriol

291k71 gold badges459 silver badges535 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mcgrailm Over a year ago

any suggestion on how to make it 0 based index ?

Oriol Over a year ago

@mcgrailm Use counter-reset: index -1 in #parentDiv (demo). Or use counter-increment: index in .childDiv:after instead of in .childDiv:before (demo).

Collectives™ on Stack Overflow

displaying index of div using css

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related