counter, counter-increment, counter-reset

[Zejo]

Hallo gibt es eine Möglichkeit, bei einer Zählung ein Element auszulassen.

als beispiel hab ich mal ne class "nichtmitzaehlen" eingesetzt, damit man sieht, was ich meine. Das werde ich natürlich am lebenden Objekt ändern.

Was könnte ich bei der class "nichtmitzaehlen" einsetzen, damit dieses Element ausgelassen wird?

Bsp.

#wrapper {
  counter-reset: zaehler;
}
h2 {
counter-increment: zaehler;
}
h2:before {
  content: counter(zaehler, decimal) ". ";
  font-weight: 800;
}

<div id="wrapper">
<h2>Punkt</h2>
<h2>Punkt</h2>
<h2>Punkt</h2>
<h2 class="nichtmitzaehlen">diesen Punkt nicht mitzählen</h2>
<h2>Punkt</h2>
<h2>Punkt</h2>
</div>

 

[Sentence]

Moin,
das geht meines wissens nicht.
Gebe den Elementen, die du zählen willst einfach eine entsprechende klasse. Dein Beispiel:

<style>
#wrapper {
  counter-reset: zaehler;
}
h2.zaehl {
  counter-increment: zaehler;
}
h2.zaehl:before {
  content: counter(zaehler, decimal) ". ";
  font-weight: 800;
}

</style>

<div id="wrapper">
<h2 class="zaehl">Punkt</h2>
<h2 class="zaehl">Punkt</h2>
<h2 class="zaehl">Punkt</h2>
<h2 class="nichtmitzaehlen">diesen Punkt nicht mitzählen</h2>
<h2 class="zaehl">Punkt</h2>
<h2 class="zaehl">Punkt</h2>
</div>

Ansonsten kannst du natürlich alle zählen, die keine Klasse besitzen:

<style>
#wrapper {
  counter-reset: zaehler;
}
h2:not([class]) {
  counter-increment: zaehler;
}
h2:not([class]):before {
  content: counter(zaehler, decimal) ". ";
  font-weight: 800;
}
</style>

<div id="wrapper">
<h2>Punkt</h2>
<h2>Punkt</h2>
<h2>Punkt</h2>
<h2 class="nichtmitzaehlen">diesen Punkt nicht mitzählen</h2>
<h2>Punkt</h2>
<h2>Punkt</h2>
</div>

Dafür kannst du natürlich auch das data atrribut oder irgendein anderes nehmen.

<style>
#wrapper {
  counter-reset: zaehler;
}

h2[data-count="1"] {
  counter-increment: zaehler;
}
h2[data-count="1"]:before {
  content: counter(zaehler, decimal) ". ";
  font-weight: 800;
}
</style>

<div id="wrapper">
<h2 data-count="1">Punkt</h2>
<h2 data-count="1">Punkt</h2>
<h2 data-count="1">Punkt</h2>
<h2 data-count="0">diesen Punkt nicht mitzählen</h2>
<h2 data-count="1">Punkt</h2>
<h2 data-count="1">Punkt</h2>
</div>

MfG

 

[Zejo]

Ah, o.k. danke, werde ich mal ausprobieren, wobei mir das Data-count Attribut noch völlig neu ist, das ist doch bestimmt wieder css3. ;-)

 

[Sentence]

Das ist HTML5, Das data-* Atrribut kannst du nennen wie du willst.
z.B. data-zaehler, data-whatever. Es muss nur "data-" vor dem Namen stehen.

MfG