How to make the counter of selected items (checkbox) standard means without using JS?
If the selected elements are missing, the block with the counter should be hidden.

    1 answer 1

    Wrote a small example of the count of selected items (checkbox).
    It is useful as an introduction to the capabilities of CSS.

    input:checked { counter-increment: list; } .result { display: none; } input:checked ~ .result { display: block; } .result::after { content: "Selected: "counter(list); }

    PS We are waiting for variables in CSS

    Demo:

     input:checked { counter-increment: list; } .result { display: none; } input:checked ~ .result { display: block; } .result::after { content: "Selected: "counter(list); } 
     <h3>Select any checkbox</h3> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <div class="result"></div>

    Codepen