Nested CSS counter does not show increment [duplicate] - css

Question

This question already has answers here:
How do I stop <div> tags interfering with counters?
(2 answers)
Closed 7 years ago.
I am trying to use CSS counters to be applied to a series of elements and I miserably fail to get it right.
The HTML code is very simple:
body {
counter-reset: objgen;
}
span.general:before {
content: counter(objgen);
counter-increment: objgen;
}
span.general {
counter-reset: objesp;
font-weight: bold;
}
span.esp:before {
content: counter(objgen) "." counter(objesp);
counter-increment: objesp;
}
span.esp {
font-weight: bold;
}
<p>inputs: </p>
<p><span class="general"></span> <input type="text" value="test1"></p>
<p><span class="esp"></span> <input type="text" value="test2"></p>
<p><span class="esp"></span> <input type="text" value="test3"></p>
<p><span class="general"></span> <input type="text" value="test4"></p>
<p><span class="esp"></span> <input type="text" value="test5"></p>
<p><span class="esp"></span> <input type="text" value="test6"></p>
The objgen counter runs OK but the objesp never increments its value: it is always equal to one. What am I doing wrong?
Is the problem coming from the fact that the span with class "esp" is not nested within the span with class "general"?
COMMENT
It seems that as pointed by Paulie_D the problem is with the structure, the following HTML works with no problem (it is not the only possibility):
<span class="general"></span><input type="text" value="test1">
<span class="esp"></span><input type="text" value="test2">
<span class="esp"></span><input type="text" value="test3">
<span class="general"></span><input type="text" value="test1">
<span class="esp"></span><input type="text" value="test2">
<span class="esp"></span><input type="text" value="test3">

Answer 1

you are using class wrong. you don't need to assign the element span if you already assigned the element a class.
So instead of
span.general -> .general
That might solve your problem.
body {
counter-reset: objgen;
}
.general::before {
content: counter(objgen) ;
counter-increment: objgen;
}
.general {
counter-reset: objesp;
font-weight: bold;
}
.esp::before {
content: counter(objgen) "." counter(objesp);
counter-increment: objesp;
}
.esp {
font-weight: bold;
}
how about this?