Calculate the number of elements with CSS

Question

Calculate the number of elements with CSS

Navigation

#1 by (4 votes)

9

I am making a numbered list with countdown counters using counter-reset . I currently place 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 a <dt> and do not adjust the counter-reset , it will print:

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

JSFiddle .

Can you detect the number of children an element has? and tried counter-reset:my-counter ~ dt , but in reality I did not quite understand the use of ~ .

I know what I can do with jQuery

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

Is it possible with pure CSS?

Reference: Numbering In Style | CSS-Tricks

html css3

asked by anonymous 06.10.2014 / 12:59

1 answer

How do "Docker" and "containers" (LXC, LXD) work? Protect automated access web pages

score 4 · Accepted Answer

There is a way to do this, using CSS transformations ( transform ), as I discovered in StackOverflow (English) , with some cons:

is not compatible with all browsers: Can I use CSS Transforms
Ihadtoaddsomemarkuptoitsoriginal,soIthinkI'vebrokenthesemantics...adivs,aroundeachgroupdt+dd.
/li>
Theselectionoftext,youhaveproblems,becausethebrowserthinksthatwhatisbelow,comesbeforeintheselectionarea

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 does it work?

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

transform: scaleY(-1)

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

So step by step, this is what happens:

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

Itturnsoutthatnow,eachofthesub-elementsisgourddown.Sowhatwehavetodoistoinverteachofthemindividually,whichinpracticewilldisinvestthem: