How can I increment the counter in my css code?

Question

In my html code I have the following list defined:

<p class="list">first.</p>
<p class="list">second.</p>

Now, in css I have:

.list {
  display: table;
}
.list:before {
  display: table-cell;
  counter-increment: counter;
  content: counter(counter) '.';
  padding-right: 5px;
}

and the result on the page is:

1. first
1. second

How can I increment the second number to the value of 2?

I don't see why you just use an ordered list `
`. This is exactly what it is made for. — Simen Fjellstad, Jan 09 '17 at 12:43
You are increasing an undeclared counter. But CSS is more sane than JS and this the counter becomes local, not global. — Oriol, Jan 09 '17 at 12:47

score 13 · Accepted Answer · answered Jan 09 '17 at 12:42

13

You should be using counter-reset property on the wrapper of the lists - see demo below:

body {
 counter-reset:counter;
}
.list {
  display: table;
}
.list:before {
  display: table-cell;
  counter-increment: counter;
  content: counter(counter) '.';
  padding-right: 5px;
}

<p class="list">first.</p>
<p class="list">second.</p>

answered Jan 09 '17 at 12:42

kukkuz

41,512
6
59
95

This answer best explains your question, though i would definitely consider using ordered lists instead, if this is your usage @user3766930 – Simen Fjellstad Jan 09 '17 at 12:45
This works only, if there are no sublists. – ssc-hrep3 Jan 09 '17 at 12:47
OP not talking about sub-lists @ssc-hrep3? – kukkuz Jan 09 '17 at 12:48
@kukkuz:: Is this css property(counter-increment) has browser compatibility ? This is a right choice for using order listed items
.
– Sayed Rafeeq Jan 09 '17 at 12:52
2

guys, OP is about why `counter` did not work and not which is better or compatible :D – kukkuz Jan 09 '17 at 12:54

score 3 · Answer 2 · answered Jan 09 '17 at 12:43

3

Instead of wrapping your HTML in <p> tags, you could use:

<ol>
  <li>first</li>
  <li>second</li>
</ol>

This will give you the output desired.

Here is a working fiddle.

This way you don't need to do any count stuff in CSS, much easier, simpler solution and compatible cross browser.

answered Jan 09 '17 at 12:43

Neelam Khan

1,078
8
24

My guess, because it didn't answer the question `how to increase the counter using css` Good alternative though if OP would want to use different markup. – Nope Jan 09 '17 at 12:56
2

I have merely provided an alternative solution @NickSalloum and no where on SO does it say you cannot do this. I don't think there is any need for such comments from yourself. If my solution doesn't work there are other answers that the OP can use. How about you provide an answer instead of criticise others. – Neelam Khan Jan 09 '17 at 13:07
2

I agree more with this answer. OP is using weird CSS to get the styling/effect of a list... So use a list. Sometimes a good answer is not what OP litterly asked for. – Martijn Jan 09 '17 at 13:39

ab29007 · Answer 3 · 2017-01-09T12:55:04.593

3

You need to reset the counter:

body {
    counter-reset: section;
}
.list {
  display: table;
}
.list:before {
  display: table-cell;
  counter-increment: section;
  content:counter(section) ". ";
  padding-right: 5px;
}

<p class="list">first.</p>
<p class="list">second.</p>

edited Jan 09 '17 at 12:55

answered Jan 09 '17 at 12:43

ab29007

7,611
2
17
43

are those `//` supposed to represent a comment? or is there something in css I don't know about? *lol* – Funk Forty Niner Jan 09 '17 at 12:52
Yes, they are supposed to be comments, and I removed them now, sorry about that – ab29007 Jan 09 '17 at 12:55
Ah, ok. Yeah, those `//` are valid in C and PHP. `/* ... */` are comments in css ;-) but pretty sure you knew that ;-) – Funk Forty Niner Jan 09 '17 at 12:56
Yeah I realized that and removed them as soon as you pointed out. Happens when you are answering questions in more then one languages at the same time. Thanks for that – ab29007 Jan 09 '17 at 12:58
Hehe, I know what you mean. Good thing you fixed it, someone might have come and downvoted you (without commenting). *Cheers* – Funk Forty Niner Jan 09 '17 at 12:59

score 1 · Answer 4 · answered Jan 09 '17 at 12:43

body {
    counter-reset: section;
}

h1 {
    counter-reset: subsection;
}

h1::before {
    counter-increment: section;
    content: "Section " counter(section) ". ";
}

h2::before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}

<h1>HTML tutorials:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials:</h1>
<h2>XML</h2>
<h2>XSL</h2>

Source: http://www.w3schools.com/css/css_counters.asp

score -2 · Answer 5 · answered Jan 09 '17 at 12:43

-2

you should use like this:

<ol>
    <li class="list">first.</li>
    <li class="list">second.</li>
</ol>

answered Jan 09 '17 at 12:43

Pawan Developers

377
4
16

1

Why `should`? - We don't know why OP has the markup the way it is and wanting to use `
` tags and number them is not invalid HTML nor incorrect.
– Nope Jan 09 '17 at 12:55
2

Original poster specifically asked about using counters, not ordered lists. While your reasoning might be validated, your answer is not helpful at all. – Nick Salloum Jan 09 '17 at 12:55

How can I increment the counter in my css code?

5 Answers5