Ιδιότητα counter-increment

Η ιδιότητα counter-increment ορίζει την αυτόματη αρίθμηση στοιχείων, για παράδειγμα, παραγράφων ή επικεφαλίδων. Χρησιμοποιείται από κοινού με την ιδιότητα counter-reset, τους ψευδοστοιχεία after και before, την ιδιότητα content, μέσα στην οποία χρησιμοποιείται η συνάρτηση counter. Για καλύτερη κατανόηση συνιστώ να δείτε τα παραδείγματα.

Σύνταξη

επιλογέας {
	counter-increment: όνομα [βήμα] | none;
}

Τιμές

Τιμή	Περιγραφή
όνομα	Όνομα μετρητή. Συνηθισμένη λέξη (όπως το όνομα κλάσης ή id). Μπορούν να οριστούν πολλά ονόματα, χωρίζοντάς τα με κενό. Σε αυτήν την περίπτωση θα αλλάζουν ταυτόχρονα πολλοί μετρητές.
βήμα	Ακέραιος θετικός ή αρνητικός αριθμός. Προαιρετική παράμετρος.
`none`	Απαγορεύει την αύξηση του μετρητή για τον τρέχοντα επιλογέα.

Προεπιλεγμένη τιμή: none.

Παράδειγμα

Ας κάνουμε τις παραγράφους να αριθμούνται αυτόματα:

<div id="parent">
	<p>κείμενο</p>
	<p>κείμενο</p>
	<p>κείμενο</p>
	<p>κείμενο</p>
	<p>κείμενο</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test;
	content: counter(test);
}

Παράδειγμα

Ας προσθέσουμε εκτός από την αρίθμηση και κάποιο κείμενο. Στην περίπτωσή μας № πριν από τον αριθμό και τελεία μετά:

<div id="parent">
	<p>κείμενο</p>
	<p>κείμενο</p>
	<p>κείμενο</p>
	<p>κείμενο</p>
	<p>κείμενο</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test;
	content: "№" counter(test) ".";
}

Παράδειγμα

Ας ξεκινήσουμε την αρίθμηση από το 10. Για αυτό βάζουμε ως αρχική τιμή του μετρητή το εννιά, δηλαδή κατά 1 λιγότερο από ό,τι χρειαζόμαστε:

<div id="parent">
	<p>κείμενο</p>
	<p>κείμενο</p>
	<p>κείμενο</p>
	<p>κείμενο</p>
	<p>κείμενο</p>
</div>

#parent {
	counter-reset: test 9;
}
#parent p::before {
	counter-increment: test;
	content: "№" counter(test) ".";
}

Παράδειγμα

Ας είναι τώρα η αρίθμηση με βήμα "2". Για αυτό βάζουμε ως βήμα το δύο:

<div id="parent">
	<p>κείμενο</p>
	<p>κείμενο</p>
	<p>κείμενο</p>
	<p>κείμενο</p>
	<p>κείμενο</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test 2; /* βάζουμε το δύο */
	content: "№" counter(test) ".";
}

Παράδειγμα

Στο προηγούμενο παράδειγμα η αρίθμηση ξεκίνησε από το δύο, αλλά εμείς θα θέλαμε από το ένα. Γιατί συνέβη αυτό; Επειδή η counter-reset επαναφέρει τις τιμές του μετρητή στο μηδέν, και στη συνέχεια η counter-increment προσθέτει το βήμά της: από προεπιλογή τη μονάδα, γι' αυτό πριν είχαμε αρίθμηση που ξεκινούσε από το 1. Τώρα όμως προστίθεται το δύο - και η αρίθμηση ξεκινάει από το δύο.

Για να διορθώσουμε το πρόβλημα βάζουμε αρχική τιμή του μετρητή στο -1 και τώρα η αρίθμηση θα ξεκινήσει από το 1 και θα αυξάνεται κατά 2:

<div id="parent">
	<p>κείμενο</p>
	<p>κείμενο</p>
	<p>κείμενο</p>
	<p>κείμενο</p>
	<p>κείμενο</p>
</div>

#parent {
	counter-reset: test -1;
}
p::before {
	counter-increment: test 2;
	content: "№" counter(test) ".";
}

Δείτε επίσης

η ιδιότητα counter-reset,
που επαναφέρει την τιμή του μετρητή στο μηδέν