Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

CSS/Eigenschaften/generierter Inhalt/Nummerierung/counter-increment

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft counter-increment können Sie Elemente mit Hilfe von CSS-Zählern durchnummerieren. So sind z.B. fortlaufende Kapitelnummerierungen möglich.

  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari

Details: caniuse.com

Folgende Angaben sind möglich:

  • none: (Standardwert) keiner der Zähler wird verändert.
  • user-ident: Der Name des Zählers, der erhöht bzw. verringert werden soll.
  • integer: Der Wert, der dem Zähler hinzugefügt werden soll. Falls nicht angegeben, wird 1 verwendet.

Sie können mit counter-increment einen Variablennamen festlegen, der dann durchgezählt wird. Durch Angabe einer oder mehrerer ganzzahliger Werte können Sie bestimmen, mit welchen Intervallen gezählt wird. Mit counter-reset können Sie den Zähler zurücksetzen.

Beachten Sie: Es können beliebig viele Zähler erhöht bzw. verringert werden, jeder durch ein Leerzeichen getrennt.

Anwendungsbeispiel[Bearbeiten]

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

p::before {
  content: counter(posMarkup, decimal);
  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, dass mit der content-Eigenschaft die Ergebnisse der counter()-Funktion ausgibt.

verschachtelte Kapitelzählung[Bearbeiten]

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;
    }

Weblinks[Bearbeiten]