CSS Referenz counter-increment

0 | 0 Kommentare | 267 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "CSS Referenz counter-increment" mit Ihrem Wissen!

Anzeige Hier werben

counter-increment

Werte: none , <Bezeichner> <Zahl>
Standardwert: none,
Vererbung: Nein
Kurzschreibweise: keine
Anwendbar auf: Alle Elemente
CSS-Level: CSS2, CSS3

Die CSS Eigenschaft counter-increment erhöht einen Wert zum dazu angegebene benannten Zähler.

Bezieht sich counter-increment auf einen Zähler der nicht von counter-reset zurückgesetzt wurde geht counter-increment von dem Wert 0 aus.

Firefox2Nein3Unbekannt3.5Unterstützt
IE6Nein7Nein8Unbekannt
Opera9.5Unterstützt10Unterstützt
Safari3Unbekannt4Unterstützt
32%
counter-increment

counter-increment wurde in CSS 2.1 entfernt, in CSS3 ist die Eigenschaft aber wieder enthalten

Elemente die nicht Sichtbar sind (display:none;) werden nicht mitgezählt.

Werte

Der Bezeichner ist frei wählbar und der dazugehörige Zahlwert ist optional. Standardmäßig steht er auf 1

Wert
 Beschreibung
none
 kein Zähler
<Bezeichner> <Zahl> Name des Zählers und der Wert um den inkementiert werden soll

Außerdem ist es möglich alle Stile die unter list-style-type zur Verfügung stehen zu nutzen.

h2:before{content:counter(h2, square)}

Beispiel

counter-increment  
Dieses Beispiel ausprobieren
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
<style type="text/css">
body{counter-reset:h2;}
h2:before {
    content:"h2 " counter(h2) ": ";
    counter-increment:h2 ;
}
h2{counter-reset:h3;}
h3:before {
    content:"h2 " counter(h2, disc) " h3 " counter(h3) " ";
    counter-increment:h3 ;
}
</style>
</head>
<body>
    <h2>Gemeinschaft</h2>
    <h3>Kontrollzentrum</h3>
    <h3>Inhalte erstellen</h3>
    <h3>Letzte Änderungen</h3>
    <h3>Wunschliste</h3>
    <h3>Abmelden</h3>
    <h3>Hilfe</h3>
    <h2>Weitere Punkte</h2>
    <h3>Irgendwas</h3>
    <h3>Was anderes</h3>
</body>
</html>
Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 2 Personen an der Seite "CSS Referenz counter-increment" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "CSS Referenz counter-increment" hier bearbeiten.

Mitarbeiter

Kommentare: CSS Referenz counter-increment