CSS - COUNTER v.1

============================
======== CSS - COUNTER  v.1 - POSTé
============================

============================
======== Automatic counters and numbering
== http://www.w3.org/TR/CSS21/generate.html

Automatic numbering in CSS 2.1 is controlled with two properties:
 'counter-increment' and 'counter-reset'.

The counters defined by these properties are used with the counter() and counters() functions of the the 'content' property.

'counter-reset'
    Value:  	[ <identifier> <integer>? ]+ | none | inherit
    Initial:  	none
    Applies to:  	all elements
    Inherited:  	no
    Percentages:  	N/A
    Media:  	all
    Computed value:  	as specified

'counter-increment'
    Value:  	[ <identifier> <integer>? ]+ | none | inherit
    Initial:  	none
    Applies to:  	all elements
    Inherited:  	no
    Percentages:  	N/A
    Media:  	all
    Computed value:  	as specified

The 'counter-increment' property accepts one or more names of counters (identifiers),
each one optionally followed by an integer.
The integer indicates by how much the counter is incremented for every occurrence of the element.
The default increment is 1. Zero and negative integers are allowed.

The 'counter-reset' property also contains a list of one or more names of counters,
each one optionally followed by an integer.
The integer gives the value that the counter is set to on each occurrence of the element. The default is 0.

The keywords 'none', 'inherit' and 'initial' must not be used as counter names.
A value of 'none' on its own means no counters are reset, resp. incremented.
'Inherit' on its own has its usual meaning (see 6.2.1).
'Initial' is reserved for future use.

This example shows a way to number chapters and sections with "Chapter 1", "1.1", "1.2", etc.

BODY {
    counter-reset: chapter;      /* Create a chapter counter scope */
}
H1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
}
H1 {
    counter-reset: section;      /* Set section to 0 */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

If an element increments/resets a counter and also uses it
(in the 'content' property of its :before or :after pseudo-element),
the counter is used after being incremented/reset.

If an element both resets and increments a counter, the counter is reset first and then incremented.

If the same counter is specified more than once in the value of the 'counter-reset' and 'counter-increment' properties,
each reset/increment of the counter is processed in the order specified.

The following example will reset the 'section' counter to 0:

H1 { counter-reset: section 2 section }

The following example will increment the 'chapter' counter by 3:

H1 { counter-increment: chapter chapter 2 }

The 'counter-reset' property follows the cascading rules. Thus, due to cascading, the following style sheet:

H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }

will only reset 'imagenum'. To reset both counters, they have to be specified together:

H1 { counter-reset: section -1 imagenum 99 }

12.4.1 Nested counters and scope

Counters are "self-nesting", in the sense that resetting a counter in a descendant element or pseudo-element
automatically creates a new instance of the counter. This is important for situations like lists in HTML,
where elements can be nested inside themselves to arbitrary depth. It would be impossible to define uniquely named counters for each level.

Thus, the following suffices to number nested list items.
The result is very similar to that of setting 'display:list-item' and 'list-style: inside' on the LI element:

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

The scope of a counter starts at the first element in the document that has a 'counter-reset'
for that counter and includes the element's descendants and its following siblings with their descendants.
However, it does not include any elements in the scope of a counter with the same name created by a 'counter-reset'
on a later sibling of the element or by a later 'counter-reset' on the same element.

If 'counter-increment' or 'content' on an element or pseudo-element refers to a counter that is not in the scope of any 'counter-reset',
implementations should behave as though a 'counter-reset' had reset the counter to 0 on that element or pseudo-element.

In the example above, an OL will create a counter, and all children of the OL will refer to that counter.

If we denote by item[n] the nth instance of the "item" counter, and by "{" and "}" the beginning and end of a scope,
then the following HTML fragment will use the indicated counters. (We assume the style sheet as given in the example above).

<OL>                    <!-- {item[0]=0        -->
  <LI>item</LI>         <!--  item[0]++ (=1)   -->
  <LI>item              <!--  item[0]++ (=2)   -->
    <OL>                <!--  {item[1]=0       -->
      <LI>item</LI>     <!--   item[1]++ (=1)  -->
      <LI>item</LI>     <!--   item[1]++ (=2)  -->
      <LI>item          <!--   item[1]++ (=3)  -->
        <OL>            <!--   {item[2]=0      -->
          <LI>item</LI> <!--    item[2]++ (=1) -->
        </OL>           <!--                   -->
        <OL>            <!--   }{item[2]=0     -->
          <LI>item</LI> <!--    item[2]++ (=1) -->
        </OL>           <!--                   -->
      </LI>             <!--   }               -->
      <LI>item</LI>     <!--   item[1]++ (=4)  -->
    </OL>               <!--                   -->
  </LI>                 <!--  }                -->
  <LI>item</LI>         <!--  item[0]++ (=3)   -->
  <LI>item</LI>         <!--  item[0]++ (=4)   -->
</OL>                   <!--                   -->
<OL>                    <!-- }{item[0]=0       -->
  <LI>item</LI>         <!--  item[0]++ (=1)   -->
  <LI>item</LI>         <!--  item[0]++ (=2)   -->
</OL>                   <!--                   -->

Another example, showing how scope works when counters are used on elements that are not nested, is the following.
This shows how the style rules given above to number chapters and sections would apply to the markup given.

                     <!--"chapter" counter|"section" counter -->
<body>               <!-- {chapter=0      |                  -->
  <h1>About CSS</h1> <!--  chapter++ (=1) | {section=0       -->
  <h2>CSS 2</h2>     <!--                 |  section++ (=1)  -->
  <h2>CSS 2.1</h2>   <!--                 |  section++ (=2)  -->
  <h1>Style</h1>     <!--  chapter++ (=2) |}{ section=0      -->
</body>              <!--                 | }                -->

The 'counters()' function generates a string composed of all of the counters with the same name that are in scope,
separated by a given string.

The following style sheet numbers nested list items as "1", "1.1", "1.1.1", etc.

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

12.4.2 Counter styles

By default, counters are formatted with decimal numbers,
but all the styles available for the 'list-style-type' property are also available for counters. The notation is:

counter(name)

for the default style, or:

counter(name, <'list-style-type'>)

All the styles are allowed, including 'disc', 'circle', 'square', and 'none'.

H1:before        { content: counter(chno, upper-latin) ". " }
H2:before        { content: counter(section, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, lower-greek) "]" }
DIV.note:before  { content: counter(notecntr, disc) " " }
P:before         { content: counter(p, none) }

12.4.3 Counters in elements with 'display: none'

An element that is not displayed ('display' set to 'none') cannot increment or reset a counter.

For example, with the following style sheet, H2s with class "secret" do not increment 'count2'.

H2.secret {counter-increment: count2; display: none}

Pseudo-elements that are not generated also cannot increment or reset a counter.

For example, the following does not increment 'heading':

h1::before {
    content: normal;
    counter-increment: heading;
}

Elements with 'visibility' set to 'hidden', on the other hand, do increment counters.


============================
======== LISTE - COUNTER - EXAMPLE - FICKR PHOTO COMMENTS
/* (new3) COUNTER COMMENTS ITEMS + NUMBER OF COMMENTS BY ME on TOP RIGHT PANEL near BUDDY ICON - ===  */
.comments-holder.order-chronological.photosInComments .comments ,
#photo-activity{
    counter-increment: myIndex  ! important;
    counter-reset: myIndex2 00 !important;
}
.sub-photo-comments-view .comments .comment:before ,
#comments #comments-list .comment-block:before {
    counter-increment: myIndex  ! important;
    content: counter(myIndex, decimal-leading-zero);
    position: absolute ! important;
    width: 15px ! important;
    min-width: 17px !important;
    margin-left: 1px ! important;
    margin-top: -5px ! important;
    background: none repeat scroll 0 0 rgba(62, 59, 59, 0.6) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 2px rgba(162, 160, 160, 0.6) inset !important;
    font-size: 10px ! important;
    text-align: center ! important;
    color: white ! important;
    z-index: 10 !important;
}


.comments .comment-author a[href="/photos/bruno-decembre/"]:after {
    counter-increment: myIndex2 ! important;
    content: counter(myIndex2, decimal-leading-zero);
/* content: "XXX" !important; */
    position: fixed !important;
    width: 15px ! important;
    min-width: 17px !important;
    height: 15px !important;
    line-height: 15px !important;
    right: 535px !important;
    top: 132px !important;
    border-radius: 10px !important;
    box-shadow: 0 0 2px rgba(162, 160, 160, 0.6) inset !important;
    font-size: 10px ! important;
    text-align: center ! important;
    color: white ! important;
    z-index: 10 !important;
/* background: rgba(62, 59, 59, 0.6) !important; */
    background: red !important;
}

============================
======== LISTE - COUNTER - EXAMPLE (XHAM) - OK
#playerBox + #commentBox.box #commentSub.boxC #commentList .item {
    counter-increment: myIndex !important;
}
#playerBox + #commentBox.box #commentSub.boxC #commentList .item:before {
    background: none repeat scroll 0 0 gold !important;
    content: counter(myIndex, decimal);
    font-size: 10px !important;
    margin-left: -107px !important;
    text-align: center !important;
    width: 15px !important;
    z-index: 10 !important;
}

===
decimal-leading-zero
DECIMAL WITTH 0 before
/* (new5) VIDEO PAGE - COMMENT BLOCK - COMMENTS COUNTER - === */
#playerBox + #commentBox.box #commentSub.boxC #commentList .item {
    counter-increment: myIndex ! important;
}
#playerBox + #commentBox.box #commentSub.boxC #commentList .item:before {
    width: 15px ! important;
    margin-left: -107px ! important;
    content: counter(myIndex, decimal-leading-zero);
    background: gold ! important;
    font-size: 10px ! important;
    text-align: center ! important;
    z-index: 10 !important;
}

/* CAM - MESSAGES COUNTER - === */
#model_dialog.full div#model_messages div {
    counter-increment: myIndex !important;
/*    counter-reset: myIndex !important; */
}
#model_dialog.full div#model_messages div:before{
    background: gold !important;
    content: counter(myIndex, decimal);
    font-size: 10px !important;
/*     margin-left: 7px !important; */
    text-align: center !important;
    width: 15px !important;
    z-index: 10000 !important;
}

============================
======== LISTE - COUNTER - 3 propriétés et une fonction :
== http://www.creativejuiz.fr/blog/tutoriels/les-compteurs-en-css

1- counter-reset :
cette propriété permet d’initialiser un compteur (le créer). Il suffit pour cela de renseigner un ou plusieurs noms de compteurs suivi de sa valeur numérique initiale.
    Exemple :
    counter-reset: compteur1 4 compteur2 0;
Ici nous avons deux compteurs initialisés : compteur1 qui démarre à 4, et compteur 2 qui démarre à 0.

2- counter-set :
cette propriété permet de redéfinir la valeur d’un compteur, sans en créer un nouveau.
Il suffit pour cela de renseigner un ou plusieurs noms de compteurs existant suivi de sa nouvelle valeur numérique.
    Exemple :
   counter-set: compteur1 0 compteur2 3;
Ici nous avons deux compteurs redéfinis : compteur1 qui redémarre à 0, et compteur 2 qui redémarre à 3.

3- counter-increment :
cette propriété permet d’incrémenter un compteur. Il suffit pour cela de renseigner le nom d’un ou plusieurs compteurs,
chacun suivi du chiffre à incrémenter.
    Exemple :
    counter-increment: compteur1 2 compteur2 4;
Ici nos deux compteurs initiaux seront augmentés de 2 pour le compteur1 et 4 pour le compteur2.

counter() :
 cette fonction associée au pseudo-élément ::before ou ::after et à la propriété content
 permet d’insérer le compteur dans votre page. Cela génère un contenu dynamique.
 Elle attend un paramètre et un second optionnel.
 Le premier est le nom du compteur, le second et le style de compteur.
(même valeurs que list-style-type)
    Exemple :
    li::before {
       content: counter(compteur1, decimal-leading-zero) " – ";
    }
Dans cet exemple, le contenu d’un élément li sera précédé d’un contenu de type « 04 –  »

Concernant le style du counter, il est possible de spéficier les valeurs
« disc », « circle », « square » et « none »,
ce qui fait qu’il est possible de ne rien générer.
Je n’ai pas encore trouvé d’utilité réelle à ces valeurs.


============================
======== COUNTER - LISTE - ::before and ::after with the COUNTER-RESET AND COUNTER-INCREMENT properties.
== http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/
::before and ::after pseudo-elements are used to insert content before or after an element’s content, purely via CSS.

These elements will inherit many of the properties of the elements that they are being attached to.

Image you want to the words “Graphic number x:” before the descriptions of graphs and charts on your page.
You could achieve this without having to write the words “Graphic number”, or the number itself yourself:

.post {
	counter-reset: image;
	}

p.description::before {
	content: "Figure number " counter(image) ": ";
	counter-increment: image;
	}

What just happened here?

First, we tell the HTML to CREATE THE “IMAGE” COUNTER :
We could have added this property to the body of the page, for example.
Also, we can call this counter whatever name we want to,
as long as we always reference it by the same name: try it for yourself!

Then we say that we want to add, before every paragraph with the class “description”,
this piece of content: “Figure number ”
 — notice that only what we wrote between quotes will be created on the page, so we need to add the spaces as well!

After that, we have counter(image):
this will pick up the property we’ve already defined in the .post selector.
It will by default start with the number one (1).

The next property is there so that the counter knows that for each p.description,
it needs to increment the image counter by 1 (counter-increment: image).

It’s not as complicated as it looks, and it can be quite useful.

The ::before and ::after pseudo-elements are often only used with the content property,
to add small sentences or typographical elements,
but here it’s shown how we can use it in a more powerful way in conjunction
with the counter-reset and counter-increment properties.

Fun fact: the ::first-line and ::first-letter pseudo-elements will match the content added by the ::before pseudo-element, if present.

Notes on browser support
These pseudo-elements are supported by IE8 (not IE7 or 6), if the single colon format is used (for example, :first-letter, not ::first-letter). All the other major browsers support these selectors

EXAMPLE SUT CETTE PAGE:
COUNTER : Figure number + NUMBER
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/") {


.post {
	counter-reset: image !important;
	}

p:before {
	content: "Figure number " counter(image) ": ";
	counter-increment: image !important;
color: red !important;
	}

}

============================
=========== LISTE - COUNTER
== http://www.quirksmode.org/css/counter.html
== http://www.css3create.com/Hierarchiser-ses-titres-avec-CSS
== http://www.w3schools.com/cssref/pr_gen_counter-increment.asp
== http://webdesign.about.com/od/css2/a/aa032807.htm
Réinitialiser votre compteur CSS
   body {counter-reset: section;}
Dire au navigateur de commencer à compter.
Vous utilisez la propriété counter-increment et de dire au navigateur le nom du compteur
(défini dans la propriété counter-reset que «section») pour incrémenter.
   H3: before {counter-increment: section;}
Alors que vous pouvez le placer sur l'élément h3 lui-même, qui va enlever tout le texte de l'élément.
Ainsi, au lieu, vous devez utiliser l'un des pseudo-sélecteurs de placer le compteur soit avant ou après l'élément h3.
Générer le contenu
Tous ces compteurs sont bel et bien, mais si vous ne pouvez les voir sur la dernière page, il n'ya pas de point. Donc, pour les amener à afficher, on utilise la propriété du contenu. Combinez la propriété de contenu avec le nom du compteur et le navigateur comptent pour vous.

H3: before {content: "Partie" counter (section) ":";}
CSS ajoute la phrase «Partie» puis le compteur nommé «article» et  espace deux points ":"
===exemple :
#tagList>li: before {
counter-increment: section
content: "Partie" counter (section) ":";;
}

============================
======== LISTE - COUNTER
First make a variable (myIndex) and make it increase every time a p element occurs.
Then insert the counter in front of all p elements:
p {
counter-increment: myIndex;
}
p:before {
content:counter(myIndex);
}

============================
=========== LISTE - COUNTER == Non-decimal counters
list-style-type
==
By default, counters use decimal numbers.
 However, you can use any value that's also a valid value for list-style-type
(though the unordered ones don't make much sense).
 For instance, I count the <pre>s in this document by Greek letters.

============================
======== LISTE - COUNTER == ESSAIS 1
== http://www.flickr.com/groups_pending.gne?id=947672@N21&user=64057764@N05&doneaccept=1
#InBox>tbody>tr{
counter-increment: myIndex;
}
#InBox>tbody>tr:before{
content:counter(myIndex);
}

============================
======== LISTE - COUNTER == ESSAIS 2
== http://userstyles.org/styles/browse?search_terms=flickr
/* ====== COUNTER RESULT ==== */
.style-brief.no-rating
{
counter-increment: myIndex;
}

============================
======== LISTE - COUNTER - LIST-STYLE (decimal)
 ul.DataList li.Item {
    list-style: decimal outside none !important;

============================
======== COUNTER
==http://www.tomsyweb.com/component/content/article/48-css/126-voici-comment-nettuts-vous-abrutit
	Avant d'utiliser un compteur CSS, il faut toujours l'initialiser.
	L'initialisation se fait au niveau d'un élément parent de l'élément auquel le compteur est appliqué.

ul {
   counter-reset:cards;
}

li:after {
   counter-increment:cards;
   content:counter(cards);
}
============================
======== LINE NUMBERING - counter-reset: line; +  ::line-marker ???????????????
== http//www.w3.org/TR/css3-content/#reserved :
Another effect commonly requested by authors is that of line numbering. This module introduces the '::line-marker' pseudo-element that is attached to the front of every line box, which can be used for this purpose.

pre { counter-reset: line; }
pre::line-marker { counter-increment: line; content: counter(line) "."; }

This pseudo-element can also be used to simulate the indentation style found in e-mail communication:

blockquote { margin: 0; padding: 0 0 0 2em; }
blockquote > blockquote { margin-left: -1em; }
blockquote::line-marker { width: 2em; text-align: left; content: ">"; }

Generated content based on the cite and datetime attributes can create introductions or citations on the fly as well.

============================
========  Stash’s Pseudo Line Numbers
== http://blogs.atlassian.com/2012/09/stashs-pseudo-line-numbers/
== https://www.google.fr/search?q=each-line+pseudo-element&ie=utf-8&oe=utf-8&rls=org.mozilla:fr:official&client=firefox-a&gws_rd=cr&ei=Y68sUriUAauw7AaTsYHgCw&Complete=1&safe=off

Counters and Generated Content

CSS counters are not a new thing. They’ve been around since CSS 2.1 and is supported in all major browsers,
including IE 8. They were originally there for resetting and controlling the numbering of ordered lists,
but this time we’re using it for something different.
Since line numbers are, in a sense, metadata when viewing source code (just as they are implied in an ordered list),
the numbers themselves don’t really need to be in the markup for the page itself.
So instead of using two empty span tags inside the line numbers div, and populating them using Javascript as the diffs are loaded over REST,
I just added :before and :after pseudo-elements to the line numbers div on each line.

<div class="hunk" style="counter-reset: fromLines 5 toLines 5;">

============================
=========== CSS - COUNTER - EXAMPLE
== http://red-team-design.developpez.com/tutoriels/css/style-listes-ordonnees/

/* (new5) TOP RATED - COUNTER NUMBER - === */
#vTop {
        counter-reset: li !important; /* Initialise le compteur */
        list-style: none !important; /* Supprime la numérotation par défaut */
        font: 15px 'trebuchet MS', 'lucida sans' !important;
        padding: 0 !important;
        margin-bottom: 4em !important;
        text-shadow: 0 1px 0 rgba(255,255,255,.5) !important;
}

#vTop tbody tr td+td table tbody tr td .video {
        position: relative !important;
        display: inline-block !important;
        padding: .4em .4em .4em 2em;
        margin: .5em 0;
        background: #ddd;
        color: white !important;
        text-decoration: none;
        border-radius: .3em;
        transition: all .3s ease-out;
}
#vTop tbody tr td+td table tbody tr td .video:hover{
        background: #eee;
}
#vTop tbody tr td+td table tbody tr td .video:hover:before{
        transform: rotate(360deg);
}
#vTop tbody tr td+td table tbody tr td .video:before{
        content: counter(li);
        counter-increment: li;
        position: absolute;
        left: 0.2em;
        top: 10%;
        margin-top: -1.3em;
        background: none repeat scroll 0 0 rgba(135, 207, 235, 0.3) !important;
        height: 2em;
        width: 2em;
        line-height: 2em;
        border: 1px solid #fff;
        text-align: center;
        font-weight: bold;
        border-radius: 13px;
        transition: all .3s ease-out;
}