counter-set | CSS-Tricks

Die CSS-Eigenschaft counter-set setzt, wie der Name schon sagt, den Startwert für einen CSS-Zähler. Kennen Sie das, wenn geordnete Listen bei 1 beginnen und dann hochgezählt werden? Die Eigenschaft counter-set erlaubt es uns, diesen Startwert auf etwas anderes zu setzen, zum Beispiel -1. Oder 2. Oder 200! Außer, dass sie auf CSS-Zähler anstelle von geordneten Listen angewendet wird.

Nehmen wir also an, wir haben einen benutzerdefinierten Zähler für eine Liste von Buchkapiteln, bei der die Kapitelnummer vor dem Kapitelnamen steht.

Wir würden mit der Eigenschaft counter-reset beginnen, um einen Zähler zu definieren. Wir nennen ihn chapter und definieren ihn auf einer übergeordneten Container-Klasse für unsere Kapitel, die wir kreativ .chapters nennen.

.chapters {
  counter-reset: chapter;
}

Als Nächstes würden wir den chapter-Zähler einem Element mit der Eigenschaft counter-increment zuweisen. Da es sich um Buchkapitel handelt, wenden wir sie auf <h2>-Elemente an, da wir davon ausgehen, dass der Buchtitel das <h1> ist. Beachten Sie, dass wir ihn tatsächlich auf das Pseudo-Element :before anwenden, da dies uns ermöglicht, unseren Zähler dem tatsächlichen <h2>-Element voranzustellen.

h2:before {
  counter-increment: chapter;
}

Kühl, das Letzte, was wir brauchen, ist zu sagen, was der Zähler anzeigen soll. Das geschieht über die Eigenschaft content mittels der Funktion counter(). Wir werden dem Zähler auch ein wenig Farbe geben, da das Design es erfordert.

h2:before {
  color: red;
  content: "Chapter " counter(chapter) ": ";
  counter-increment: chapter;
}

Hey, wir sehen gut aus!

Aber warten Sie! Mir gefällt die Tatsache, dass wir mit Kapitel 1 beginnen, nicht wirklich. Ich meine, das „Vorwort“ ist nicht *wirklich* ein Kapitel. Wenn überhaupt, ist es wie Kapitel 0.

Da kommt counter-set ins Spiel! Lassen Sie uns die Dinge bei Null beginnen lassen

h2:first-of-type::before {
  counter-set: chapter;
}

Da haben wir's! Das ist besser. Allein durch das Setzen des Eigenschaftswerts auf den Namen des Zählers haben wir die Kapitel-Liste so eingestellt, dass sie bei Kapitel 0 beginnt. Wir hätten sie genauso gut bei etwas anderem starten lassen können, wie Kapitel 100.

Und wenn ein Browser counter-set nicht unterstützt? Nichts wirklich. Er wird einfach ignoriert und die Liste beginnt mit ihrem Standardwert 1.

Syntax

[ <custom-ident> <integer>? ]+ | none

Dies ist im Grunde eine ausgefallene Art zu sagen, dass die Eigenschaft den Namen eines benutzerdefinierten Zählers (<custom-ident>) und den Startwert (<integer>) nimmt. Oder setzen Sie ihn auf none und die Nummerierung beginnt am Standard-Startpunkt 1.

Initialwert: none
Gilt für: alle Elemente (einschließlich nicht-visueller Elemente)
Vererbt: nein
Animationstyp: nach berechnetem Werttyp

Werte

/* Set "awesome-counter" to 0 */
counter-set: awesome-counter;

/* Set "awesome-counter" to -10 */
counter-set: awesome-counter -10;

/* Set "awesome1" to 0, and "awesome2" to 2 */
counter-set: awesome1 awesome2 2;

/* Wipe out any other settings that may have been declared elsewhere */
counter-set: none;

/* Global values */
counter-set: inherit;
counter-set: initial;
counter-set: unset;

Beachten Sie, dass counter-set einen neuen Zähler erstellt, wenn der darauf deklarierte Zählername noch nicht anderswo definiert wurde.