Counter css variables

HTML & CSS
1

SO i was introduced to this topic today and i was playing around with the code .

<body>
<p class="ct">First make a variable increase every time a p element occurs.</p>
<p class="ct">Then insert the counter in front of all p elements</p>
<p class="ct"> counter in kh rews df</p>

</body>

in css

.ct {
  counter-reset: myindex 2;
}

.ct::before {

  content: "SECTION " counter(myindex) ": ";
  

}

I figured out that

  1. When the 1st paragraph is being encountered then the code flows to first .ct style where counter is created which is starting from 2

  2. then it goes to before element where along with the wrd SECTION the value of counter is inserted .

  3. Then it goes to the 2nd paragraph and then the code flows to
    first .ct style where counter is reset to 2 from the previous value and then it goes to before element where along with the wrd SECTION the current value of counter is inserted .

And for the other paragraph same case.





<body>
<p class="ct">First make a variable increase every time a p element occurs.</p>
<p class="ct">Then insert the counter in front of all p elements</p>
<p class="ct"> counter in kh rews df</p>

</body>

IN css : 


body {
  counter-reset: myindex 2;
}

.ct::before {

  content: "SECTION " counter(myindex) ": ";
  }

  1. When the code encounters the body part then the counter is created starting from 2 .

  2. When the 1st paragraph is being encountered then the code flows to .ct style :: before element    where along with the wrd SECTION the value of counter is inserted .

Then it again encounters another paragraph which is linked to before element styling so the word Section is inserted along with the SAME previous counter value.




<body>
<p class="ct">First make a variable increase every time a p element occurs.</p>
<p class="ct">Then insert the counter in front of all p elements</p>
<p class="ct"> counter in kh rews df</p>

</body>

IN css : 


.ct {
  counter-reset: myindex 2;
}

.ct::before {

  content: "SECTION " counter(myindex) ": ";
  
counter-increment:myindex ;
}

OUTPUT:
   
Section 3 :   First make a variable increase every time a p element occurs.

Section 3 :  Then insert the counter in front of all p elements

Section 3 :  counter in kh rews df

Explantion:

  1. When the 1st paragraph is being encountered then the code flows to first .ct style where counter is created starting from 2

  2. then it goes to before element where along with the wrd SECTION the value of counter is first incremented and then inserted
    Now when the code meets the second paragraph then the code flows to .ct style where counter is reset to 2 again .

  3. Now the code goes to ::before element where the counter is first AGAIN incremented to 3 then printed along with word section .

Same case for other paragraphs too.

I was saying that although i have written counter-increment after content but the HTML parser is first incrementing in every loop then inserting before the content . Is this a rule??

.ct::before {

  content: "SECTION " counter(myindex) ": ";
  
counter-increment:myindex ;
}






q2: " The counter’s name must not be “none”, “inherit”, or “initial”; otherwise the declaration is ignored. "

WHy this is so?

2

I don’t see anything in the W3C spec saying that counter-increment will always increment before other styles in a rule, so I would say this is probably dependent on browser and not a hard rule.

As for question 2, that is because none, inherit and initial are words with special meaning and could lead to ambiguous situations. It would simply be bad practice to name a counter “none” when none means something elsewhere in CSS. (aka display: none; font: inherit; etc.)

:slight_smile:

3 Likes
3

It doesn’t matter where the counter-increment property/value is placed in that rule as the counter increment applies to the element it is placed on. The CSS content property value merely shows the counter that has been set for that element. The order of those two rules are unimportant and not browser dependent.

It’s not like a variable in JS that has to come before you use it. In CSS as all rules for an element are pulled together from multiple sources and origins and resolved via the cascade ( specificity, origin and inheritance etc). Then they are applied to the element.

You may indeed want to change those rules later on in a media query so all rules are gathered together and then applied.

For instance the content property could be the last property in a rule block but that doesn’t mean all the rules before it will be ignored.

In a simpler example if you have a span and you set width and height then nothing happens because dimensions don’t apply to inline elements. But as soon as you apply display:block to the end of that rule those dimensions take effect. The browser doesn’t say hold on a minute you need to tell me first its a block element before you supply dimensions.

As to all your examples then they are all nonsense really as none will do anything useful.:slight_smile:

1 Like
4

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