Ιδιότητα counter-increment

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

Σύνταξη

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

Τιμές

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

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

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

Результат:

Δείτε επίσης