CSS-Eigenschaft counter-reset
Die counter-reset-Eigenschaft setzt einen oder mehrere CSS-Counter auf einen bestimmten Wert zurück. Diese Eigenschaft wird normalerweise zusammen mit den Eigenschaften content und counter-increment verwendet. Die Eigenschaft akzeptiert einen Counter-Namen und einen optionalen Integer-Wert oder das Schlüsselwort none. none ist der Standardwert. Negative Werte sind erlaubt.
| Anfangswert | none |
|---|---|
| Gilt für | Auf alle Elemente. |
| Vererbt | Nein. |
| Animierbar | Nein. |
| Version | CSS2 |
| DOM-Syntax | object.style.counterReset = "section" ; |
Syntax
Syntax der CSS-Eigenschaft counter-reset
css
counter-reset: none | name number | initial | inherit;Beispiel für die counter-reset-Eigenschaft:
Beispiel der CSS-Eigenschaft counter-reset mit dem Wert section
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2::before {
counter-increment: section;
content: "Book " counter(section) ". ";
}
</style>
</head>
<body>
<p>Click the "Try it" button to set the counter-reset property:</p>
<button onclick="myFunction()">Try it</button>
<h2>HTML Tutorials</h2>
<h2>JavaScript Tutorials</h2>
<h2>CSS Tutorials</h2>
<script>
function myFunction() {
document.body.style.counterReset = "section 5";
}
</script>
</body>
</html>Beispiel für die counter-reset-Eigenschaft mit negativem Wert:
Beispiel der counter-reset-Eigenschaft mit negativem Wert:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
/* "my-counter" to 0 */
counter-reset: my-counter;
}
h2::before {
/* "my-counter" by 1 */
counter-increment: my-counter -1;
content: "Section " counter(my-counter) ". ";
}
</style>
</head>
<body>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>PHP Tutorial</h2>
</body>
</html>Beispiel für die counter-reset-Eigenschaft mit nummerierten Abschnitten und Unterabschnitten:
Beispiel der counter-reset-Eigenschaft mit nummerierten Abschnitten und Unterabschnitten:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
/* Set "section" to 0 */
counter-reset: section;
}
h2 {
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h2::before {
counter-increment: section;
content: "Book " counter(section) ": ";
}
h3::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h2>HTML</h2>
<h3>HTML Basics</h3>
<h3>HTML Templates</h3>
<h3>HTML References</h3>
<h3>HTML Tags</h3>
<h2>CSS</h2>
<h3>CSS Basics</h3>
<h3>CSS References</h3>
<h3>CSS Advanced</h3>
<h3>CSS Guides</h3>
<h3>CSS Selectors</h3>
<h3>CSS Properties</h3>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| none | Counter werden nicht erhöht. |
| name number | Name definiert den Namen des zurückzusetzenden Counters. Number definiert den Wert, auf den der Counter bei jedem Auftreten des Elements zurückgesetzt wird. Standardwert ist 0, falls nicht angegeben. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Praxis
Wofür wird die CSS-Eigenschaft 'counter-reset' verwendet?