CSS Zähler verwenden

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. CSS Zähler sind eine Implementierung von Automatic counters and numbering in CSS 2.1.

Der Wert eines Zählers wird durch die Verwendung von counter-reset geändert. counter-increment kann auf einer Seite durch verwenden der counter() oder counters() Funktion der content Eigenschaft dargestellt werden.

Zähler verwenden

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 counter() Funktion verwendet werden. Das folgende CSS fügt am Anfang jedes h3 Elements "Abschnitt <der Wert des Zählers>:" ein.

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 */
}

Beispiel:

<h3>Einführung</h3>
<h3>Inhalt</h3>
<h3>Zusammenfassung</h3>

Zähler verschachteln

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 counters() Funktion verwendet, kann ein String zwischen verschiedenen Leveln von verschachtelten Zählern eingefügt werden. Beispielsweise dieses 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 < IE8 unterstützt werden soll,
                                            sollte sichergestellt werden, dass
                                            kein Leerzeichen nach dem ',' steht. */
}

Kombiniert mit dem folgenden HTML:

<ol>
  <li>Eintrag</li>          <!-- 1     -->
  <li>Eintrag               <!-- 2     -->
    <ol>
      <li>Eintrag</li>      <!-- 2.1   -->
      <li>Eintrag</li>      <!-- 2.2   -->
      <li>Eintrag           <!-- 2.3   -->
        <ol>
          <li>Eintrag</li>  <!-- 2.3.1 -->
          <li>Eintrag</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>Eintrag</li>  <!-- 2.3.1 -->
          <li>Eintrag</li>  <!-- 2.3.2 -->
          <li>Eintrag</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>Eintrag</li>      <!-- 2.4   -->
    </ol>
  </li>
  <li>Eintrag</li>          <!-- 3     -->
  <li>Eintrag</li>          <!-- 4     -->
</ol>
<ol>
  <li>Eintrag</li>          <!-- 1     -->
  <li>Eintrag</li>          <!-- 2     -->
</ol>

Erzeugt dieses Ergebnis:

Spezifikationen

Siehe auch

• counter-reset
• counter-increment

Es gibt ein zusätzliches Beispiel unter https://www.mezzoblue.com/archives/20.../counter_intu/. Dieser Blogeintrag wurde am 01.11.2006 veröffentlicht, sollte jedoch noch zutreffen.