CODEWITHSUNDEEP
csscount
xvilo
xvilo

Reputation: 273

CSS count all elements in DOM

Not sure if i'm asking right, but i want to have a pure CSS count on all the elements (label) in the Dom with the class .required, example html markup

<dl class="last">
            <dt><label class="required"><em>*</em>Kleur</label></dt>
        <dd>
            <div class="input-box">
                <select name="super_attribute[92]" id="attribute92" class="required-entry super-attribute-select" style="position: absolute; top: -9999px;">

                  <option value="">Kies een optie...</option><option value="220" price="0">Champagne</option><option value="29" price="0">Zwart</option></select>
              <div class="swatches-container"><img src="http://www.lingerie-donna.nl/media/swatches/champagne.png" alt="Champagne" title="Champagne" class="swatch-img"><img src="http://www.lingerie-donna.nl/media/swatches/zwart.png" alt="Zwart" title="Zwart" class="swatch-img"></div></div>
        </dd>
            <dt><label class="required"><em>*</em>Maat</label></dt>
        <dd class="last">
            <div class="input-box">
                <select name="super_attribute[140]" id="attribute140" class="required-entry super-attribute-select" disabled="" style="position: absolute; top: -9999px;">
                    <option>Kies een optie...</option>
                  </select>
              <div class="swatches-container"></div></div>
        </dd>
        </dl>

my used css is:

 .required{
text-transform: lowercase;
   counter-increment: my-awesome-counter;
 }

 .required:before {
  text-transform: none;
  content: "" counter(my-awesome-counter) " Kies uw ";
}

But what i see is 

1 Kies uw Kleur
1 Kies uw Maat

it should be
1 Kies uw Kleur 2 Kies uw Maat

Upvotes: 0

Views: 202

Answers (1)

emerson.marini
emerson.marini

Reputation: 9348

You're missing the counter-reset part:

body {
  counter-reset: my-awesome-counter;
}
.required {
    text-transform: lowercase;
    counter-increment: my-awesome-counter;
}
.required:before {
    text-transform: none;
    content: counter(my-awesome-counter) " Kies uw ";
}

Demo

Upvotes: 3

Related Questions