Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Counters, basic tidbits
/*
* more helpful links
* http://www.w3.org/TR/CSS2/generate.html#scope
* http://quirksmode.org/css/css2/counter.html
* http://www.impressivewebs.com/css-counter-increment/
*/
/* decimal counters (basic, default) */
div:before {
counter-increment: example1;
content: counter(example1);
}
/* Non decimal counters */
div:before {
content: "(ex " counter(example1,lower-greek) ")";
}
/* incrementing a counter by 1 (default) */
div {
counter-increment: example1;
}
/* incrementing by a value other than "1"
example1 will now increment by "3"
**/
div {
counter-increment: example1 3;
}
/* resetting a counter */
h2 {
counter-increment: example1;
counter-reset: example2;
}
h3 {
counter-increment: example2;
}
/* resetting a counter to a value other than "0"
example2 is now reset to "4"
**/
h3 {
counter-reset: example2 4;
}
/* multiple counters
this will give the appearance of x.y (example1 . example 2)
**/
h3:before {
content: counter(example1) "." counter(example2);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment