Forums

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

HugoGiraudel

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/

HugoGiraudel

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.

HugoGiraudel

Safari also supports it.

amis

I think it should be

<

ol> not

<

ul> 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.

treehouse : what would you like to learn today?

Forums

[Solved] How to make counter-increment count 'down' in CSS3 ?