CODEWITHSUNDEEP
htmlcss
Javad
Javad

Reputation: 437

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

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>

Upvotes: 0

Views: 87

Answers (2)

Javad
Javad

Reputation: 437

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>

Upvotes: 0

Mauricio
Mauricio

Reputation: 581

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.

Upvotes: 1

Related Questions