Counter properties in CSS. What do they serve and how do they work?

Navigation
8

Recently I was studying CSS and discovered counter-reset and counter-increment , but I did not really understand the properties and I had some doubts.

Questions

  • What is counter-reset and counter-increment in CSS?
  • Is there any real utility for these properties?
  • Are they supported by many browsers?
  • How do they really work?
    • asked by anonymous 26.09.2018 / 15:05

    2 answers

    5

    I know two types of application for counter. One is numbering pages, the other is numbering items and sub-items of a list for example. But you can use it to number chapters of an editorial and its sub-titles for example ... Another simple application would be to number for example the number of divs , as if it were an ordered list of divs numbered. >

    See the example.

    First you have to "start" Counter on all <ol> , and remove the default value from the Sorted List. Then in% w / w you% increase% w / w% w /% w /%. The cool thing here is that you have all the flexibility of CSS to customize your numbers etc. I left the comment in the CSS code 

    ol {
    counter-reset: section;  /* inicia um contador com valor 0 nome de "section" */             
    list-style-type: none;   /* remove o valor default da <ol> */ 
}

li::before {
    counter-increment: section; /* inclui o contado "section" com incremento de 1 */          
    content: counters(section, "-") ": ";  /* pega o valor do counter do pai e coloca um "-" depois da um espaço com os ": " e coloca o valor do counter do filho */
    color: red;
    font-size: 20px;
    font-family: sans-serife;
}

.custom-counter {
    margin: 0;
    padding: 0;
}
    <div>
    <ol class="custom-counter">
        <li><b>RESUMO DE ATIVIDADES</b>
            <ol class="custom-counter">
                <li><b>SUB ATIVIDADES</b></li>
                <li><b>SUB ATIVIDADES</b></li>
            </ol>
        </li>
        <li><b>COMENTÁRIOS</b>
            <ol class="custom-counter">
                <li><b>SUB COMENTÁRIOS</b></li>
                <li><b>SUB COMENTÁRIOS</b></li>
            </ol>
        </li>
    </ol>
</div>

    Example numbering <li> 2 by two as the increment of 2 within Counter 

    div {
    width: 100px;
    height: 100px;
    border: 1px solid;
    position: relative;
    display: inline-block;
    counter-increment: nDiv 2; /* começa o contador a partir de 2 e vai somando 2 a cada incremento */
}

div::before {
    content: counter(nDiv); /* mostra o valor do contador */
    position: absolute;
    top: 5px;
    left: 5px;
}
    <div></div>
<div></div>
<div></div>
<div></div>

    Here is an example page rendering application: 

      @page {
    size: A4;  
    margin: 70pt 60pt 170pt;
    counter-increment: page;
    @bottom-center {
      content: "Page " counter(page);
    }
  }

    Example how to start counting by a certain number on a given page. 

     @page { counter-increment: page } @page:first { counter-reset: page 9 }

    The combination of both rules will reset the counter to the first page to 9. Then for each page (including the first), it will increment the counter. This results in a counter value of 10 for the first page, 11 for the second, and so on.

    Source: link

    About browser support

    Counter is a relatively old and widely accepted property, until IE8 already has support for it as you can see here: link

    Reference and Documentation

    Here you can read more about Content link

    p>     
    26.09.2018 / 15:20
    4

    The counter-reset property creates or resets a CSS counter for a given value.

    The property counter-increment causes the counter value to be increased or decreased.

    See example , where I say that meu_contador has initial value 0, and after each occurrence it is always incremented +1. Note that ::before allows you to insert content before an element, in this case before an item in the list. The content property is to tell the browser that content should be placed at the beginning of the HTML element. 

    <!DOCTYPE html>
<html>

<head>
  <style>
    body {
      /* definindo "meu_contador"  como 0 */
      counter-reset: meu_contador 0;
    }
    
    h2::before {
      /* Incrementado "meu_contador" como 1 */
      counter-increment: meu_contador 1;
      content: "Fruta " counter(meu_contador) ": ";
      color: black;
    }
    
    h1 {
      color: orange;
    }
    
    h2 {
      color: green;
    }
  </style>
</head>

<body>
  <h1>Lista de frutas:</h1>
  <h2>Uva </h2>
  <h2>Maçã</h2>
  <h2>Jabuticaba</h2>
  <h2>Pêra</h2>
  <h2>Banana</h2>
  <h2>Laranja</h2>

</body>

</html>

    Syntax:

    - counter-increment: 

    counter-increment: <custom-ident> <integer>

    Where:

    • <custom-ident> :

      This is the name of the counter to increment.

    • <integer> :

      It is the value to add to the counter. If they are not specified the default value is 1.

    Example: counter-increment: exemplo_contador 2;

    - counter-reset: 

    counter-reset: <custom-ident> <integer>

    Where:

    • <custom-ident> :

      It's counter name to reset.

    • <integer> :

      Is the value to reset the counter on every occurrence of the element. If they are not specified the default value is 0.

    Example: counter-reset: exemplo_contador 1;

    The image below shows the version of browsers that fully support the property:

    Reference:

    MDN Web Docs

    W3Schools

        
    26.09.2018 / 16:58
    What is the difference between the Height and ClientHeight properties of a TForm? How to set and get application version