CSS-Counter: Nummerierungen für HTML-Elemente
![[Bildschirmfoto]
CSS-Counter: Nummerierungen für HTML-Elemente [Bildschirmfoto]
CSS-Counter: Nummerierungen für HTML-Elemente](img/css_counter.png)
Mit dem CSS-Counter lassen sich beliebige HTML-Elemente nummerieren.
Hier ein Beispiel:
David Brittain
Ruslan Belkin
Mohomodou Houssouba
Shuichiro Inomata
Margaret Melton
HTML-Angabe
Ich empfehle dafür eine eigene CSS-Klasse (z.B.: "beispiel") anzulegen,
damit andere HTML-Elemente nicht mitzählen
.
<div class="beispiel">
<p> David Brittain </p>
<p> Ruslan Belkin </p>
<p> Mohomodou Houssouba </p>
<p> Shuichiro Inomata </p>
<p> Margaret Melton </p>
</div>
Counter einrichten
Für das <div>-Element mit der Klasse: "beispiel" wird ein neuer Counter „platz”, angelegt:
div.beispiel {
counter-reset: platz;
}
Über die CSS-Eigenschaft counter-reset
wird der Counter angelegt und auf Null gesetzt.
Counter weiter zählen
Im nächsten Schritt wird festgelegt, bei welchem HTML-Element der Counter „platz”, weiter zählen soll, in diesem Beispiel ist es das <p>-Element:
div.beispiel p {
counter-increment: platz;
}
Mit der CSS-Eigenschaft counter-increment
wird der Counter erhöht.
Counter darstellen
Jetzt wird der Counter vor dem <p>-Element eingefügt.
div.beispiel p::before {
content: counter(platz) ". ";
color: Blue;
}
Fertig!
Das komplette Script
<style> div.beispiel { counter-reset: platz; } div.beispiel p { counter-increment: platz; } div.beispiel p::before { content: counter(platz) ". "; color: Blue; } </style> ... <div class="beispiel"> <p> David Brittain </p> <p> Ruslan Belkin </p> <p> Mohomodou Houssouba </p> <p> Shuichiro Inomata </p> <p> Margaret Melton </p> </div>
Anpassen
Ändern Sie die Angaben, dadurch kann die Ausgabe des Counters anders dargestellt werden, hier zwei Beispiele:
David Brittain
Ruslan Belkin
Mohomodou Houssouba
Shuichiro Inomata
Margaret Melton
div.beispiel p::before {
content: "Platz " counter(platz) ": ";
color: Gold;
font-weight: Bold;
}
David Brittain
Ruslan Belkin
Mohomodou Houssouba
Shuichiro Inomata
Margaret Melton
div.beispiel p::after {
content: " (" counter(platz) ")";
color: Violet;
}