Generate sequential or series number through CSS

HTML & CSS
1

I know how to generate numbers series through PHP, but is it possible that we can generate the same through the HTML/css working in every browser?

2

Yes there is a counter in CSS.

1 Like
3

thanks they are working in all the old and new browsers sir?

Looks like they are highly compatible.

820Ă—196 9.38 KB

But android and IOS seems to be an issue.

If I have not incorrectly searched than this is the representation on the property:

4

It works as far back ad IE8 which should be more than enough.
The older alternative is to utilise ordered lists.

2 Likes
5

That is taken from the article which was written in 2012, look as the current “caniuse”.

3 Likes
6 
<div class="class1">
	<div class="repetition">
		<h5> Grid demo 1</h5>		
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		</p>						
	</div><!-- repetition -->

	<div class="repetition">
		<h5> Grid demo 2</h5>		
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		</p>						
	</div><!-- repetition -->

	<div class="repetition">
		<h5> Grid demo 3</h5>		
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		</p>						
	</div><!-- repetition -->
</div><!-- class1 -->

I want an output like above tried this →

But didn’t succeeded.

7

Try putting a dot . in front of your class selectors. :slight_smile:

3 Likes
8

Oh yeah that worked a silly mistake indeed.

9

The code could be improved further.
There is no need for the extra span in the header, the pseudo element adds the extra element for you, that is its purpose.

2 Likes
10

Maybe we can also write like this:

content: "Grid Demo " counter(my-sec-counter) ".";

and delete the Grid demo from the <h5> tag.

11

If it is actual content, it would make more sense semantically to leave it in.
It may help reduce repetition in your coding, but for screen readers and search spiders it is invisible, so may harm accessibility and seo.

5 Likes
12

Hi there all,

The concept is still not very much clear to me. I created the same example by seeing this here:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_counter-reset

Confusions:

  1. whats the use of counter reset when the truth is that actually no prior counter was set?
13

Counter reset is required to make counter increment work, they go hand in hand.

There is detailed info here at MDN, Using CSS counters

To use a CSS counter, it must first be initialized to a value with the counter-reset property (0 by default). The same property can also be used to change its value to any specific number. Once initialized, a counter’s value can be increased or decreased with counter-increment.

The original intended use for css counters is for <ol>, ordered lists. Which have built in counters. They were also intended for use with headings that act as chapters, which could have sub headings within those chapters. Such as with book chapters.

Then when you get into nested lists that don’t use a counter reset, their numbering begins again.

As seen here…

258Ă—209 1.95 KB

But there are times when those nested items actually need to be sub numbered items, so that is when you would use a counter reset, to reset it’s default counter behavior.

384Ă—250 3.48 KB

4 Likes
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.