Counters test

Simple counters

This is the first paragraph. Ideo autem aquis et ibam forte via sacra sicut meus est mos.

This is the second paragraph. Ideo autem aquis et ibam forte via sacra sicut meus est mos.

This is a breaking paragraph.

This is the third paragraph. Ideo autem aquis et ibam forte via sacra sicut meus est mos.

This is a div with class .last and .box

This is the fourth paragraph. Ideo autem aquis et ibam forte via sacra sicut meus est mos.

This is a blockquote.

This is the fifth paragraph. Ideo autem aquis et ibam forte via sacra sicut meus est mos.

This is the sixth paragraph. Ideo autem aquis et ibam forte via sacra sicut meus est mos.

This is the seventh and last paragraph. Ideo autem aquis et ibam forte via sacra sicut meus est mos.

This paragraph has two classes applied on it. The relevant CSS code is the following:

body {counter-reset: par;}

p.c1:before {
counter-increment: par;
content: counter(par) ". ";
font-weight: bold;
}

.last:before {
content: '\B6' " ";
font-weight: bold;
}

As you can see from the code above, there is an inner conflict between the second and third declaration block. Speaking from a theoretical point of view, this is a limit in the specifications. Infact, a pseudo-element can be represented as follows:

<p>
<before>Content</before>
Content of the paragraph
</p>

Just because a pseudo-element has a behaviour similar to a normal HTML element, I think it would be useful if we could apply two classes with generated content on the same pseudo-element, such as I've done for the div with grey background.

Nested counters

The 'counter()' function

  1. Item
  2. Item
  3. Item
    1. Item
    2. Item
      1. Item
      2. Item
      3. Item
  4. Item
  5. Item

The relevant CSS is the following:

ol.first {
counter-reset: item item2 item3;
list-style: none;
}
ol.first li:before {
counter-increment: item;
content: counter(item) ". ";
font-weight: bold;
}
ol.first ol {list-style: none; }
ol.first ol li:before {
counter-increment: item2;
content: counter(item) "." counter(item2) " ";
font-weight: bold;
}

ol.first ol ol {list-style: none;}
ol.first ol ol li:before {
counter-increment: item3;
content: counter(item) "." counter(item2) "." counter(item3) " ";
font-weight: bold;
}

The 'counters()' function

  1. Item
  2. Item
  3. Item
    1. Item
    2. Item
      1. Item
      2. Item
      3. Item
  4. Item
  5. Item

The relevant CSS is the following:

ol.second {
counter-reset: voce;
list-style: none;
}
ol.second li:before {
counter-increment: voce;
content: counters(voce, ".") " ";
font-weight: bold;
}
ol.second ol {list-style: none; counter-reset: voce;}

Look carefully at the line highlighted with a yellow background: the syntax in the 'content' property must follow the order indicated above. Otherwise, the counters will not be showed. For istance, if I remove the comma or the dot inside the double quotes, everything goes wrong. I wonder if this is a bug or not. Also removing both the dot and the comma the test fails.

Using different selectors

  1. Item
  2. Item
  3. Item
    1. Item
    2. Item
      1. Item
      2. Item
      3. Item
  4. Item
  5. Item

The relevant CSS is the following:

ol.third {
counter-reset: item4 item5 item6;
list-style: none;
}
ol.third > li:before {
counter-increment: item4;
content: counter(item4) ". ";
font-weight: bold;
}
ol.third  ol {list-style: none; }
ol.third ol > li:before {
counter-increment: item5;
content: counter(item4) "." counter(item5) " ";
font-weight: bold;
}

ol.third  ol  ol {list-style: none;}
ol.third  ol  ol > li:before {
counter-increment: item6;
content: counter(item4) "." counter(item5) "." counter(item6) " ";
font-weight: bold;
}

Results

Passed tests. Some doubts about the 'counters()' function.

Back