Ankur Soni Ankur Soni - 3 years ago 142
CSS Question

How to Show Serial Number inside 'span' tag in nested hierarchy

Below is the code that I am going to use,

<template name="App_ViewTasks">
<body class="skin-blue sidebar-mini" style="height: auto;">
<div class="content-wrapper">
<section class="content">
<div class="row">
{{#each tasks}}
<div class="col-xs-12">
<div class="box box-danger">
<div class="box-header">
<h3 class="box-title">
<span class="label label-default css-serial"> </span>
</h3>
</div>
</div>
</div>
{{/each}}
</div>
</section>
</div>
</body>
</template>


I want an auto serial number to be generated inside the span tag just like below.

enter image description here

I am trying to achieve it using css with below code.

.css-serial {
counter-reset: serial-number; /* Set the serial number counter to 0 */
}
.css-serial {
counter-increment: serial-number; /* Increment the serial number counter */
content: counter(serial-number); /* Display the counter */
}


I am missing the element mapping, that's it! any help would be deeply appreciated.


Note: Not necessary that css has to be used to achieve this, you may suggest much better implementation.

Answer Source

You're very close with your solution.

content is only used on the :before and :after pseudo-elements.

The counter-reset was being reset for every span, so I've added :first-of-type to the selector.

.content-wrapper .content .row .col-xs-12:first-of-type {
  counter-reset: serial-number;
  /* Set the serial number counter to 0 */
}

.css-serial {
  counter-increment: serial-number;
  /* Increment the serial number counter */
}

.css-serial:after {
  content: counter(serial-number);
  /* Display the counter */
}
<div class="content-wrapper">
  <section class="content">
    <div class="row">
      <div class="col-xs-12">
        <div class="box box-danger">
          <div class="box-header">
            <h3 class="box-title">
              <span class="label label-default css-serial"> </span>
            </h3>
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="box box-danger">
          <div class="box-header">
            <h3 class="box-title">
              <span class="label label-default css-serial"> </span>
            </h3>
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="box box-danger">
          <div class="box-header">
            <h3 class="box-title">
              <span class="label label-default css-serial"> </span>
            </h3>
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="box box-danger">
          <div class="box-header">
            <h3 class="box-title">
              <span class="label label-default css-serial"> </span>
            </h3>
          </div>
        </div>
      </div>
      <div class="col-xs-12">
        <div class="box box-danger">
          <div class="box-header">
            <h3 class="box-title">
              <span class="label label-default css-serial"> </span>
            </h3>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

edit

Based on update question: You need to change the selector for the counter-reset. From your html, I've changed it to .content-wrapper .content .row .col-xs-12:first-of-type. It would be better if you add a class to the outer div for prettier css.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download