CSS/Tutorials/Listen mit hybrider Nummerierung formatieren

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

Informationen zum Autor

Name:
Thomas J. Sebestyen
E-Mail:
Homepage:

Listen sind ein praktisches und oft verwendetes Mittel zur Darstellung von Informationen, wie z.B. Inhaltsverzeichnissen etc. 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, wo nicht nur eine automatische Nummerierung fortgeführt werden soll, sondern auch verschiedene Aufzählungsformate gemischt werden müssen.

Abhilfe schafft hier CSS mit der Möglichkeit, Inhalte automatisch zu generieren und somit Nummerierungszähler zu definieren und zu steuern. Das folgende Beispiel zeigt Ihnen, wie solch eine hybride Nummerierung mit nur wenigen Angaben erreicht werden kann.

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>

Das Beispiel sollte im Browser eine ähnliche Darstellung wie folgt ergeben:

1. Allgemeines zu Pseudoformaten
2. Pseudoformate für Verweise  
     2a. :link
     2b. :visited
     2c. :hover
     2d. :active
     2e. :focus
3. Pseudoformate für Absätze 
     3a. :first-line
     3b. :first-letter
     3c. :first-child
4. Pseudoformate für automatisch generierten Text 
     4a. ::before
     4b. ::after
5. Automatische Nummerierung

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 eine eigene Klasse ol.ebene1 definieren und 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]