How to make counter-increment count ‘down’ in CSS3 ?

[amis]

Hey

I use counter-increment property in css3 which give me 1,2,3,4,..etc , I wonder how to make this counter descendant like 4,3,2,1 ??

[Paulie_D]

You would have to use javascript I suspect to count the number of items and then count backwards.

I doubt if there is a pure CSS way.

[Paulie_D]

EDIT…there may be but you would have to know the number of items to start with.

I guess if you use ‘counter-reset’ and set it to the number of items and then set counter increment to ‘-1’.

[amis]

thx Paulie_D
but i don’t the number of items

is there any method even if with PHP ?

[Paulie_D]

Sorry, that about as far as I can get.

My guess is that javascript could do something for you.

[JohnMotylJr]

@amis,

You can do this through a little jQuery

count = $('element').length + 1;

$('element').each(function () {

count--;

$(this).prepend('-' + count + ' ');

});

Here is a example: CodePen Example

[Kitty Giraudel]

You could also use a reversed ordered list.

[JohnMotylJr]

@HugoGiraudel : Are you referring to something like this?

Example. Nice find, i never knew about this, so thanks.

Reference: http://www.impressivewebs.com/reverse-ordered-lists-html5/

[Kitty Giraudel]

Yup. )

[Paulie_D]

Except that there is zero browser support at the moment :)

So we’re back to JS.

EDIT: Works in Codepen / Chrome so it looks like there is some adoption.

Good find.

[Kitty Giraudel]

Safari also supports it.

[amis]

I think it should be

not
right ?

[JohnMotylJr]

@amid : are you referring to the js solution in the CodePen example? If so I’m not sure considering I made it as a standard unordered list and used js to manipulate a count. Technically, or semantically, I’m guessing you would use ol because it is an element you are counting, even if we give it a list-style-type: none.

[Author]

Posts