files/de/web/css/css_counter_styles/using_css_counters/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

---
title: CSS Zähler verwenden
slug: Web/CSS/CSS_Counter_Styles/Using_CSS_counters
tags:
  - Anleitung
  - CSS
  - CSS Listen
  - CSS Wert
  - Fortgeschrittene
  - Layout
  - Referenz
  - Web
translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
original_slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary">CSS Zähler sind im Grunde von CSS verwaltete Variablen, deren Werte mittels CSS Regeln inkrementiert werden können, um nachzuvollziehen, wie oft sie verwendet wurden. Dies ermöglicht es, die Darstellung von Inhalten anhand der Positionierung innerhalb des Dokuments anzupassen.</span> CSS Zähler sind eine Implementierung von <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> in CSS 2.1.</p>

<p>Der Wert eines Zählers wird durch die Verwendung von {{cssxref("counter-reset")}} geändert. {{cssxref("counter-increment")}} kann auf einer Seite durch verwenden der <code>counter()</code> oder <code>counters()</code> Funktion der {{cssxref("content")}} Eigenschaft dargestellt werden.</p>

<h2 id="Zähler_verwenden">Zähler verwenden</h2>

<p>Um einen CSS Zähler zu verwenden, muss er zunächst auf einen Wert zurückgesetzt werden (standardmäßig 0). Um den Wert eines Zählers zu einem Element hinzuzufügen, kann die <code>counter()</code> Funktion verwendet werden. Das folgende CSS fügt am Anfang jedes h3 Elements "Abschnitt &lt;der Wert des Zählers&gt;:" ein.</p>

<pre class="brush: css">body {
  counter-reset: section;                      /* Setzt den Abschnittszähler auf 0 */
}

h3::before {
  counter-increment: section;                  /* Erhöht den Abschnittszähler */
  content: "Abschnitt " counter(section) ": "; /* Zeigt den Zähler an */
}
</pre>

<p>Beispiel:</p>

<pre class="brush: html">&lt;h3&gt;Einführung&lt;/h3&gt;
&lt;h3&gt;Inhalt&lt;/h3&gt;
&lt;h3&gt;Zusammenfassung&lt;/h3&gt;</pre>

<p>{{EmbedLiveSample("Zähler_verwenden", 280, 150)}}</p>

<h2 id="Zähler_verschachteln">Zähler verschachteln</h2>

<p>Ein CSS Zähler ist besonders nützlich, um kontinuierte Listen zu erstellen, da in Kindelementen automatisch eine neue Instanz eines CSS Zählers erzeugt wird. Wird die <code>counters()</code> Funktion verwendet, kann ein String zwischen verschiedenen Leveln von verschachtelten Zählern eingefügt werden. Beispielsweise dieses CSS:</p>

<pre class="brush: css">ol {
  counter-reset: section;                /* Erstellt mit jedem ol Element
                                            eine neue Instanz des
                                            Abschnittszählers. */
  list-style-type: none;
}

li::before {
  counter-increment: section;            /* Inkrementiert nur diese Instanz
                                            des Abschnittszählers. */
  content: counters(section,".") " ";    /* Fügt den Wert aller Instanzen
                                            des Abschnittszählers durch "."
                                            getrennt hinzu. */
                                         /* Falls &lt; IE8 unterstützt werden soll,
                                            sollte sichergestellt werden, dass
                                            kein Leerzeichen nach dem ',' steht. */
}
</pre>

<p>Kombiniert mit dem folgenden HTML:</p>

<pre class="brush: html">&lt;ol&gt;
  &lt;li&gt;Eintrag&lt;/li&gt;          &lt;!-- 1     --&gt;
  &lt;li&gt;Eintrag               &lt;!-- 2     --&gt;
    &lt;ol&gt;
      &lt;li&gt;Eintrag&lt;/li&gt;      &lt;!-- 2.1   --&gt;
      &lt;li&gt;Eintrag&lt;/li&gt;      &lt;!-- 2.2   --&gt;
      &lt;li&gt;Eintrag           &lt;!-- 2.3   --&gt;
        &lt;ol&gt;
          &lt;li&gt;Eintrag&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
          &lt;li&gt;Eintrag&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
        &lt;/ol&gt;
        &lt;ol&gt;
          &lt;li&gt;Eintrag&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
          &lt;li&gt;Eintrag&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
          &lt;li&gt;Eintrag&lt;/li&gt;  &lt;!-- 2.3.3 --&gt;
        &lt;/ol&gt;
      &lt;/li&gt;
      &lt;li&gt;Eintrag&lt;/li&gt;      &lt;!-- 2.4   --&gt;
    &lt;/ol&gt;
  &lt;/li&gt;
  &lt;li&gt;Eintrag&lt;/li&gt;          &lt;!-- 3     --&gt;
  &lt;li&gt;Eintrag&lt;/li&gt;          &lt;!-- 4     --&gt;
&lt;/ol&gt;
&lt;ol&gt;
  &lt;li&gt;Eintrag&lt;/li&gt;          &lt;!-- 1     --&gt;
  &lt;li&gt;Eintrag&lt;/li&gt;          &lt;!-- 2     --&gt;
&lt;/ol&gt;</pre>

<p>Erzeugt dieses Ergebnis:</p>

<p>{{EmbedLiveSample("Zähler_verschachteln", 250, 350)}}</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS2.1", "generate.html#generate.html#counters", "counter-reset")}}</td>
   <td>{{Spec2("CSS2.1")}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>{{cssxref("counter-reset")}}</li>
 <li>{{cssxref("counter-increment")}}</li>
</ul>

<p><em>Es gibt ein zusätzliches Beispiel unter <a class="external" href="http://www.mezzoblue.com/archives/2006/11/01/counter_intu/" rel="freelink">http://www.mezzoblue.com/archives/20.../counter_intu/</a>. Dieser Blogeintrag wurde am 01.11.2006 veröffentlicht, sollte jedoch noch zutreffen.</em></p>