Why two counter-increment does not work in a css selector

Question

As you can see below only the last counter-increment will work. is this a bug or a feature ? is there any way to use multiple counter-increment other than using different selectors ?

input#p1:checked {
  counter-increment: --t1 5;
}
input#p2:checked {
  counter-increment: --t1 5;
  counter-increment: --t2 5; /* only the last one works */
}

input#p3:checked {
  counter-increment: --t1 5;
  counter-increment: --t2 5;
  counter-increment: --dummy 5; /* only the last one works */
}

#result::after {
  content: counter(--t1) '*' counter(--t2) ' points';
}

<input type="checkbox" id="p1">
<input type="checkbox" id="p2">
<input type="checkbox" id="p3">

<div id="result">result: </div>

Mauricio · Accepted Answer · 2017-08-16 18:30:04Z

1

counter-increment is a css property like many others. You can only set it ounce inside the element. Basically, the last value overwrites any previous values.

answered Aug 16, 2017 at 18:30

Mauricio

5814 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Javad · Accepted Answer · 2017-08-16 18:34:14Z

0

after testing a bit more i found the answer myself. you can use as many counters as you want with counter-increment , also thanks to @Mauricio to remind me its a css property like many others.

input#p1:checked {
  counter-increment: --t1 5;
}
input#p2:checked {
  counter-increment: --t1 5 --t2 5;
}

input#p3:checked {
  counter-increment: --t1 5 --t2 5;
}

#result::after {
  content: counter(--t1) '*' counter(--t2) ' points';
}

<input type="checkbox" id="p1">
<input type="checkbox" id="p2">
<input type="checkbox" id="p3">

<div id="result">result: </div>

answered Aug 16, 2017 at 18:34

Javad

4471 gold badge5 silver badges15 bronze badges

Collectives™ on Stack Overflow

Why two counter-increment does not work in a css selector

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related