Calculate the number of elements with CSS

Question

I’m making a numbered list of regressive counters using the counter-reset. Currently I put the number of items in the list manually:

.faq { counter-reset:my-counter 2; }
.faq dt { counter-increment: my-counter -1; }
.faq dt:before { content: counter(my-counter, decimal-leading-zero) "."; }

With HTML:

<dl class="faq">    
    <dt>Item 1</dt>
    <dt>Item 2</dt>
</dl>

Prints:

01. Item 1
00. Item 2

But if you add one <dt> and not adjust the counter-reset, will print:

01. Item 1
00. Item 2
-01. Item 3

Jsfiddle.

Li Can CSS Detect the number of Children an element has? and tried to counter-reset:my-counter ~ dt, but I didn’t really understand the use of ~.

I know what I can do with jQuery

var reset = 'my-counter '+ $('.faq dt').length;
$('.faq').css( 'counter-reset', reset );

It is possible with pure CSS?

^{Reference: Numbering In Style | CSS-Tricks}

Answer 1

There is a way to do using CSS transformations (transform), as I discovered in the Stackoverflow ^(english), with a few cons:

• is not compatible with all browsers: Can I use CSS Transforms

  

• I had to add some Markup to its original, so I think I broke the semantics a little... some divs, around each group dt+dd.

• text selection, is in trouble, because the browser thinks that what is below, comes first in the selection flow

  

The solution

.faq {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}
.faq > * {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}
.faq {
  counter-reset: my-counter 0;
}
.faq dd {
  margin: 0 0 50px;
}
.faq dt:before {
  content: counter(my-counter, decimal-leading-zero)".";
  font: bold 50px/1 Sans-Serif;
  left: 0;
  position: absolute;
  top: 5px;
}
.faq dt,
.faq dd {
  padding-left: 90px;
}
.faq dt {
  counter-increment: my-counter 1;
  font: bold 16px Georgia;
  padding: 4px 0 10px 90px;
  position: relative;
}
body {
  padding: 20px;
  background-color: #eee;
}

<dl class="faq">
  <div>
    <dt>Como colocar o umbigo pra dentro?</dt>
    <dd>Aperte o umbago com o dedão. Fonte: Wikipedia.</dd>
  </div>
  <div>
    <dt>Onde eu baixo um processador dual core?</dt>
    <dd>AMD ou IBM?</dd>
  </div>
  <div>
    <dt>Carne vermelha faz mal, carne branca faz mal, o que devo comer?</dt>
    <dd>Carne humana.</dd>
  </div>
  <div>
    <dt>Quando devo falar sobre sexo com meu cachorro?</dt>
    <dd>Quando ele entrar na puberdade.</dd>
  </div>
</dl>

How it works?

The principle is to reverse the vertical coordinate system using CSS transformations:

transform: scaleY(-1)

This will reverse the Y axis, which is traditionally the vertical axis.

So step by step, this is what happens:

1. If we apply this transformation only once, then what happens is that everything inside the element with the style applied turns upside down. In this case, we first apply the transformation to the element that encompasses the entire list:

   

2. It turns out now, each of the sub-elements is gourd-down. So what we have to do is reverse each of them individually, which in practice will deflect them: