Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to show the total number of elements in the content css property?

Tags:

css

I'm using the following css to display a step counter:

:before {
  content: "step " counter(fieldsets);
  counter-increment: fieldsets;
  /* Some more css */
}

But I was wondered if it was possible to display the total number of elements as well, like so:

:before {
  content: "step " counter(fieldsets) " of " total_number_of_fieldsets;
  counter-increment: fieldsets
  /* Some more css */
}

I would love it to be a pure css solution, is that possible?

like image 618
Jasper Kennis Avatar asked Aug 31 '12 16:08

Jasper Kennis


People also ask

How do I count elements in CSS?

In the CSS we are going to do three key things: Initialize the counter on the parent div using counter-reset. Increment the counter value by 1 on the child div p using counter-increment. Add the counter variables before the div p content using the :before pseudo selector.

What is the content property in CSS?

The content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced elements.

What is the purpose of the content property?

The property is used to insert generated content in a web page and it is fully supported in all major browsers.


1 Answers

Unless you have something else that calculate the total_number_of_fieldsets count in the CSS, it is not possible.

See this fiddle: http://jsfiddle.net/EawLA/

You can show the total :after

Note that this will not work in IE<9 as pseudo elements are not supported

like image 63
user1512616 Avatar answered Sep 23 '22 10:09

user1512616