HTML/Tutorials/Listen/Hybride Nummerierung

Aus SELFHTML-Wiki
< HTML‎ | Tutorials‎ | Listen
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
20min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Grundkenntnisse in
HTML
CSS

Listen sind ein praktisches und oft verwendetes Mittel zur Darstellung von Informationen, wie z.B. Inhaltsverzeichnissen. Mit Hilfe von HTML ist es zwar möglich, auch die Nummerierung von Listen zu bestimmen, jedoch sind die Grenzen dabei bald erreicht, wenn es um eine hybride, also um eine gemischte Art der Nummerierung geht, bei der verschiedene Aufzählungsformate gemischt werden müssen.

Abhilfe schafft hier CSS mit der Möglichkeit, Inhalte automatisch zu generieren und mit der counter()-Funktion Nummerierungszähler zu definieren und zu steuern, die sich bei Änderung des Markups dynamisch anpassen.

counter()[Bearbeiten]

counter() (engl. für Zähler) ist eine CSS-Funktion für Variablen, deren Werte durch CSS-Regeln inkrementiert (erhöht) werden, um zu verfolgen, wie oft sie benutzt worden sind. Dadurch ist es möglich Inhalt abhängig von seiner Position in der Webseite unterschiedlich darzustellen.

  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari

Details: caniuse.com

Syntax

counter(name, <'list-style-type'>)


Zählen mit counter-increment[Bearbeiten]

Der Wert eines Zählers wird durch die Verwendung von counter-reset (Initialiseren und Zurücksetzen) und counter-increment (Erhöhen des Werts) bestimmt.

Zählung von Absätzen ansehen …
p {
  counter-increment: posMarkup;	
  position: relative;
}

p::before {
  content: counter(posMarkup);
  position: absolute;
}

Der Absatz p erhält mit counter-increment die Variable posMarkup zugewiesen, deren Wert bei jedem Auftreten um den Standardwert 1 erhöht wird. (Tipp: Fügen Sie im Frickl eine 2 hinzu und aktualisieren Sie die Seite.)

Vor jeden Absatz wird nun mit ::before ein Pseudoelement erzeugt. Diese Pseudoelement erhalten nun mit der content-Eigenschaft einen Inhalt - ihnen werden die Ergebnisse der counter()-Funktion zugewiesen.

Initialisieren eines Zählers mit counter-reset[Bearbeiten]

Im oberen Beispiel wurde auf das Initialisieren eines Zählers verzichtet. Im nächsten Beispiel sind die Textabsätze in mehreren section-Elementen organisiert. Dabei würde die Zählung in jedem Element wieder bei 1 anfangen.

Zählung von Absätzen-2 ansehen …
body {
  counter-reset: posMarkup 0;  
}  

p {
  position: relative;
}

p::before {
  counter-increment: posMarkup;	
  content: counter(posMarkup, upper-roman);
  position: absolute;
}

Das body-Element erhält mit counter-reset: posMarkup 0; eine Festlegung für einen ZählerposMarkup, der bei 0 beginnt und für die ganze Webseite gilt.

Der Absatz p erhält nun mit ::before ein Pseudoelement. Die Erhöhung des Zählwerts durch counter-increment findet nun nicht mehr im Absatz, sondern gleich im Pseudoelelement statt.

Über content werden die Ergebnisse der counter()-Funktion ausgegeben. Dabei wird hier zusätzlich zum Namen der list-style-type upper-roman angegeben, sodass anstelle des Standardwerts decimal mit Dezimalzählung hier römische Ziffern verwendet werden.

verschachtelte Kapitelzählung[Bearbeiten]

Im Beispiel wird eine verschachtelte Überschriftenhierarchie mit zwei Ebenen definiert, wobei die Nummerierung der Listenpunkte der zweiten Ebene einerseits die Nummer des übergeordneten Listenpunktes behalten und anderseits zusätzlich auch eine eigene Nummerierung in einem anderen Format erhalten sollen.

verschachtelte Kapitelzählung ansehen …
body {
  counter-reset: section;
}

h2 {
  counter-reset: subsection;
}

h2::before {
  counter-increment: section;
  content: "Band " counter(section) " - ";
  color: red;
}

h3::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) ": ";
  color: green;
}

In diesem Beispiel werden für ein verschachteltes Inhaltsverzeichnis zwei Zähler verwendet:

  • Für das gesamte Dokument werden die Abschnitte im Wert section gezählt;
  • bei jeder h2 beginnt eine weitere, neue Zählung mit subsection.

Die h2-Überschriften erhalten über den Inhalt des Pseudoelements die Angabe "Band n -";
die h3-Überschriften mit content: counter(section) "." counter(subsection) ": ";entsprechend eine Kombination aus Haupt- und Unterkapitel.

counters()[Bearbeiten]

Die counters()-Funktion erzeugt eine Zeichenkette, die aus allen Zählern und einem angegebenen String erzeugt wird.

Syntax

counters(item, ".") " ";


Erzeugen einer verschachtelten Zählhierarchie ansehen …
ol {
    counter-reset: table-of-content;
    list-style-type: none;
}
li::before {
    counter-increment: table-of-content;
    content: counters(table-of-content,".", decimal) " ";
	color: red;
	font-weight: bold;
}

Das CSS zählt verschachtelte Listenelemente als "1", "1.1", "1.1.1", usw.

Die counters()-Funktion benötigt einige Zeilen weniger, kann aber nicht für die Zählung verschiedener Elemente, bzw. für unterschiedliche Formatierungen verwendet werden.

Kapitel werden zum Inhaltsverzeichnis[Bearbeiten]

Häufig wird so eine verschachtelte Kapitelzählung wie im vorletzten Abschnitt auch in einem Inhaltsverzeichnis aufgenommen, um am Seitenanfang interne Links auf die jeweiligen Kapitel zu richten.

ToDo (weitere ToDos)

Das folgende Beispiel stammt aus einem SELFHTML-aktuell-Artikel aus dem Jahre 2002. Damals musste über Klassen selektiert werden, da der IE keine Nachfahrenselektoren wie ol ol kannte.

Ein guter Ersatz wäre ein dynamisch erstelltes Inhaltsverzeichnis, das alle h2- und h3-Überschriften ausliest und eine entsprechende Navigation erstellt.


--Matthias Scharwies (Diskussion) 08:10, 25. Okt. 2020 (CET)
Beispiel ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Listen mit hybrider Nummerierung formatieren</title>
    <style>
      ol.ebene1 {
        counter-reset: listenpunkt_ebene1;
        list-style-type: none;
      }
      ol.ebene1 li::before {
        content: counter(listenpunkt_ebene1) ". ";
        counter-increment: listenpunkt_ebene1;
      }
      ol.ebene2 {
        counter-reset:listenpunkt_ebene2;
        list-style-type:none;
      }
      ol.ebene2 li::before {
        content: counter(listenpunkt_ebene1) counter(listenpunkt_ebene2,lower-alpha) ". ";
        counter-increment:listenpunkt_ebene2;
      }
    </style>
  </head>
  <body>
    <ol class="ebene1">
      <li>Allgemeines zu Pseudoformaten</li>
      <li>Pseudoformate für Verweise
        <ol class="ebene2">
          <li>:link</li>
          <li>:visited</li>
          <li>:hover</li>
          <li>:active</li>
          <li>:focus</li>
        </ol>
      </li>
      <li>Pseudoformate für Absätze
        <ol class="ebene2">
          <li>:first-line</li>
          <li>:first-letter</li>
          <li>:first-child </li>
        </ol>
      </li>
      <li>Pseudoformate für automatisch generierten Text
        <ol class="ebene2">
          <li>::before</li>
          <li>::after</li>
        </ol>
      </li>
      <li>Automatische Nummerierung</li>
    </ol>
  </body>
</html>

Im Beispiel wird eine verschachtelte Liste mit zwei Ebenen definiert, wobei die Nummerierung der Listenpunkte der zweiten Ebene einerseits die Nummer des übergeordneten Listenpunktes behalten und anderseits zusätzlich auch eine eigene Nummerierung in einem anderen Format erhalten sollen.

Zunächst sollten Sie für die erste Ebene der Liste bestimmen, dass der Nummerierungszähler bei jedem Vorkommen dieser Klasse auf Null (die Voreinstellung) zurückgesetzt wird: counter-reset:listenpunkt_ebene1;. Der Name des Zählers ist hier listenpunkt_ebene1. Die Angabe list-style-type:none; dient lediglich dazu, die HTML eigene Nummerierung zu unterbinden, da wir diese durch die Nummerierung per CSS ersetzen wollen:

Beispiel
ol.ebene1 {
  counter-reset:listenpunkt_ebene1;
  list-style-type:none;
}

Im nächsten Schritt greifen Sie für die Listenpunkte der ersten Ebene ol.ebene1 li auf das Pseudoelement ::before zurück, mit dessen Hilfe automatisch Texte generiert werden können. Den Inhalt des generierten Textes können Sie mit der CSS-Eigenschaft content des ::before Pseudoformats bestimmen. Als Inhalt werden wir einen Zähler counter() definieren und diesem Zähler einen Namen listenpunkt_ebene1 geben, gefolgt von einem Punkt und einem Leerzeichen zwischen Anführungszeichen (". "). Mit der Angabe counter-increment:listenpunkt_ebene1; erhöhen Sie den benannten Zähler listenpunkt_ebene1 um eins. Und so sieht die weitere Definition für die Listenpunkte der ersten Ebene aus:

Beispiel
ol.ebene1 li::before {
  content: counter(listenpunkt_ebene1) ".";
  counter-increment:listenpunkt_ebene1;
}


Ganz ähnlich verfahren Sie bei der Definition der Liste der zweiten Ebene. Zuerst definieren Sie eine Klasse, dann die Rücksetzung der Nummerierungszähler und die Unterdrückung der HTML eigenen Nummerierung:

Beispiel
ol.ebene2 {
  counter-reset:listenpunkt_ebene2;
  list-style-type:none;
}

Die Definition für die Listenpunkte der zweiten Ebene sieht aber nun ein wenig anders aus:

Beispiel
ol.ebene2 li::before {
  content: counter(listenpunkt_ebene1) counter(listenpunkt_ebene2,lower-alpha) ".";
  counter-increment:listenpunkt_ebene2;
}

Hier müssen Sie nun zwei Zähler verwenden. Mit dem ersten Zähler counter(listenpunkt_ebene1) greifen Sie auf den Zähler des übergeordneten Listenpunktes zurück. Mit dem zweiten Zähler definieren Sie einen eigenen Zähler für die Listenpunkte der aktuellen Ebene und gleichzeitig bestimmen Sie, welchen Darstellungstyp dieser Zähler haben soll: counter(listenpunkt_ebene2,lower-alpha). Darauf folgen hier ebenfalls ein Punkt und ein Leerzeichen zwischen Anführungszeichen (". "). Abschließend erhöhen Sie den neuen Zähler mit counter-increment:listenpunkt_ebene2.

Beachten Sie: Falls Sie beim counter() nur den Namen des Zählers bestimmen, z.B. mit counter(listenpunkt_ebene1), wird für die Darstellung des Zählers automatisch das Format "decimal" angenommen.

Wollen Sie eine weitere Ebene einfügen, würde die CSS-Definition für eine Darstellung 1a1., 1a2., 1b1., 1b2. etc. wie folgt aussehen:

Beispiel
 ol.ebene3 {
   counter-reset:listenpunkt_ebene3;
   list-style-type:none;
 }
 ol.ebene3 li::before {
   content: counter(listenpunkt_ebene1) counter(listenpunkt_ebene2,lower-alpha) counter(listenpunkt_ebene3) ". "; 
   counter-increment:listenpunkt_ebene3;
 }


Siehe auch[Bearbeiten]

  • Bildergalerie mit Grid Layout, deren Kindelemente sich an den verfügbaren Platz anpassen. Zur besseren Kennzeichnung der Reihenfolge im Markup wurden sie mit counter() nummeriert.

Weblinks[Bearbeiten]