CSS counters

One of the rarely used features of CSS2.1 are counters. They are described in the specification section on content generation. What is it?

I will give an example from the specification that emulates a regular numbered list using a counter and the content property:

 OL {counter-reset: item}
 LI {display: block}
 LI: before {content: counter (item) ".";  counter-increment: item}

The first rule we assign to OL elements is a counter named “item”, then for all LIs we change the value of the display property to block instead of the default value (list-item), which disables standard markers-digits. Finally, in the last rule, we increment the counter for each element of the list, and we show its value before the element using the counter () function and the content property. It's simple.


With the help of the counter mechanism, it is possible to make numbered lists, numbered 1, 1.1, 1.2. Moreover, the markers themselves can be designed quite flexibly, for example, as a result of this code:

< style >
OL { counter-reset: item }
LI { display: block }
LI:before { content: "{" counters(item, ".") "} "; counter-increment: item; font-weight:bold }
</ style >

< ol >
< li > item 1, level 1 </ li >
< li > item 2, level 1 </ li >
< li > item 3, level 1 </ li >
< li > item 4, level 1
< ol >
< li > item 1, level 2 </ li >
< li > item 2, level 2 </ li >
< li > item 3, level 2 </ li >
</ ol >
</ li >
< li > item 5, level 1 </ li >
</ ol >

* This source code was highlighted with Source Code Highlighter .

we will get this list:
')


The counters () function takes two parameters, the name of the counter whose value you want to output and the separator string between the values ​​of the nested counters, in this case, the point. Also, the second parameter can be any of the possible values ​​of the list-style-type attribute, i.e. none, disc, circle and square. In the last three cases, the list will look just like a regular unnumbered list with markers of the appropriate type.

But that's not all.

With the help of counters, you can implement what was recently done exclusively with the help of scripts — count the elements, and display the result of the counting on the page. For example, the result of this code:

< style >
div {counter-reset: num-p} /* num-p */
div p {counter-increment: num-p;margin:0} /* p div */
div:after { /* */
display:block;font-weight:bold;
content: " : " counter(num-p) ".";
}
</ style >
< div >
< p > 1 </ p >
< p > 2 </ p >
< p > 3 </ p >
< p > 4 </ p >
</ div >

* This source code was highlighted with Source Code Highlighter .

This will be the following page:



Here we used the pseudo-element: after of the div element to display the final value of the associated counter.

Finally, I’ll give you the code, the result of which you saw on the image at the very beginning of the topic, if you connect this style as a custom style of your browser, then next to each topic you will have “some statistics” about it:

/* */
div.hentry {
counter-reset:
num-post-sections 1
/* / . , . */
/* , .content */
num-code-listings /* code pre */
num-bq /* */
num-br /* break-lines */
num-links /* */
num-links-internal /* */
num-links-rel-tag /* rel='tag' */
num-img /* */
;
}
/* . */
div.hentry .content h4,
div.hentry .content h5,
div.hentry .content h6 { counter-increment: num-post-sections; }
div.hentry .content code,
div.hentry .content pre { counter-increment: num-code-listings; }
div.hentry .content img { counter-increment: num-img; }
div.hentry .content blockquote { counter-increment: num-bq; }
div.hentry .content br { counter-increment: num-br; }

div.hentry .content a[href] { /* */
counter-increment: num-links;
}
div.hentry .content a[href^="http://habrahabr.ru/"],
div.hentry .content a[href^="/"] { /* */
counter-increment:
num-links
num-links-internal;
}
div.hentry a[rel="tag"] { /* */
counter-increment:
num-links
num-links-rel-tag;
}
/* */
div.hentry:after {
clear:both;
display: block;
background:#9cc;
border:1px solid #79B1D4;
padding:10px;
margin:0 35px;
white-space:pre;
content:
"This topic contains: \a"
"Sections - " counter(num-post-sections) ",\a"
"Code listings - " counter(num-code-listings) ",\a"
"Links - " counter(num-links) ", " counter(num-links-internal) " internal and "
counter(num-links-rel-tag)" tags, \a"
"Images - " counter(num-img) ",\a"
"Quotes - " counter(num-bq) ",\a"
"Break lines - " counter(num-br) "\a"
;
}


* This source code was highlighted with Source Code Highlighter .

Restrictions

1. Unfortunately, the hotly and passionately loved Intenet Explorer browser by all of us - does not support CSS counters up to version 7, like the content property. But in the 8th, they say support will be.
2. Output of total counters is possible only in the pseudo-element: after, which limits the design possibilities.
3. Content generated using css cannot be selected / selected by the user.

Based on the limitations, the described features are unlikely to find wide application, but I think a bright future is not far off. All code was written just to show you these possibilities :)

Upd. The writing of the topic and the code was greatly helped by the article by Meitar Moscovitz , there are still some good examples.