Criando contadores apenas com CSS \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 14 Horas 10 Min 24 Seg Tempo restante da oferta: 14 10 24 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Criando contadores apenas com CSS [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # Criando contadores apenas com CSS Você sabia que é possível criar contadores apenas com CSS? Com isso, alguns desenvolvedores conseguem até criar jogos sem nenhuma linha de JavaScript! [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 10 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/css-counters-1.png) Olá Web Developers! Vocês sabiam que é possível criar contadores apenas com CSS? Com isso alguns desenvolvedores conseguem até criar jogos sem nenhuma linha de JavaScript! Os contadores fazem parte do CSS 2, então já possuem suporte por boa parte dos navegadores. Mesmo assim, são poucas as pessoas que conhecem ou fazem uso deles. Para quem nunca viu pode parecer meio estranho, mas vamos ver de modo simples como usá-los! [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) ## Inicializando o contador Primeiro vamos imaginar que os contadores são simplesmente variáveis, exatamente como as das linguagens de programação. Então, vamos começar com a declaração: ```css .minha-classe{ counter-reset: meucontador; } ``` - **meucontador** é o nome do nosso contador, nossa “variável”. - **counter-reset** reinicia o nosso contador. É como se estivéssemos escrevendo: ```javascript var meucontador = 0; ``` ## Imprimindo o contador Agora vamos apresentar o nosso contador em algum lugar. Para isso, nós usamos a propriedade `content`, que deve ser usada junto a um pseudo-elemento, `::before` ou `::after`. ```html Minha Div ``` ```css .imprime-contador::after{ content: counter(meucontador); } ``` O resultado será: Veja que colocamos a classe `imprime-contador` em uma `div`. Foi exibido o conteúdo da div, e o `::after` acrescentou depois dela o que passamos em `content`, o valor do nosso contador. ## incrementando o contador Agora temos que incrementar o nosso contador. ```css .imprime-contador{ counter-increment: meucontador } ``` Diferente do `counter-reset`, que reinicia o nosso contador, o `counter-increment` incrementa o valor. Sempre que houver uma classe onde haja o incremento do nosso contador, ele será incrementado. Seria como se executássemos o seguinte código: ```javascript // imagine "elementsList" como sendo uma lista com todos // os elementos HTML do nosso código elementsList.forEach((element)=>{ if( element.classList.contains("imprime-contador") ){ meucontador++; } }) ``` Então se colocarmos três divs: ```html Minha Div Minha Div Minha Div ``` O Resultado será: ## Incrementando de acordo com a seleção do usuário Podemos também aproveitar o seletor `:checked`, que indica checkboxes marcados, para utilizar como condição para o incremento dos contadores. Por exemplo: ```html body { padding: 2em; } .counter-reset{ counter-reset: checkboxcounter; } .meucheckbox{ width: 20px; height: 20px; margin-right: 10px; appearance: checkbox; -moz-appearance: checkbox; -webkit-appearance: checkbox; } .counter-print::after{ content: "Total: " counter(checkboxcounter); } .meucheckbox:checked{ counter-increment: checkboxcounter; } Clique nos Checkboxes para ver o contador incrementar: CheckBox 1 CheckBox 2 CheckBox 3 ``` Se você quiser testar: Aqui fizemos o seguinte: - Criamos uma classe no CSS apenas para reiniciar nosso contador, o `.counter-reset`; - Criamos uma classe no CSS apenas para imprimir o total do nosso contador, o `.counter-print`; - Fizemos um tipo de “condição” para o incremento, que são os checkboxes da classe `.meucheckbox` que estiverem marcados; Vejam então que conseguimos fazer um contador que tem seu valor atualizado na página sem o uso de onclicks que chamam funções que calculam valores e atualizam o HTML, ou o uso de binds como os do Angular ou React. Apenas algumas linhas de CSS foram necessárias para criar este comportamento. Alguma ideia, dúvida ou sugestão sobre como usar o CSS Counter? Compartilhe com a gente aí nos comentários! Por hoje é só. Até o próxima o/ [ ![HTML5 + CSS3 - Propriedades e seletores avançados](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Propriedades e seletores avançados Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-propriedades-e-seletores-avancados) - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/04/05114901/ORLEANS-NET-CORE-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 9 anos atrás ## [ Criando uma aplicação distribuída com ASP.NET Core e o Microsoft Orleans ](https://www.treinaweb.com.br/blog/criando-uma-aplicacao-distribuida-com-asp-net-core-e-o-microsoft-orleans) Veja o exemplo de uma aplicação ASP.NET Core acessando os dados de um servidor cluster definido com o Microsoft Orleans. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/09/27171404/diego-eis-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 8 anos atrás ## [ TW Entrevista 11: Diego Eis ](https://www.treinaweb.com.br/blog/tw-entrevista-11-diego-eis) Fizemos uma série de entrevistas chamada "TW Entrevista". O entrevistado de hoje é o Diego Eis, fundador do Tableless, um dos maiores sites sobre desenvolvimento web do Brasil. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/GUIA-LINGUAGEM-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Guia da Linguagem JavaScript ](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript) Neste Guia da Linguagem Javascript vamos abordar aspectos fundamentais, como: tipos de dados, variáveis, objetos, arrays e muito mais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/06/03131718/DIAGNÓSTICO-400x280.png) [ Infraestrutura e Sistemas Operacionais ](https://www.treinaweb.com.br/blog/categoria/infraestrutura-e-sistemas-operacionais) 8 anos atrás ## [ Diagnosticando uma aplicação no .NET Core 3.0 ](https://www.treinaweb.com.br/blog/diagnosticando-uma-aplicacao-no-net-core-3-0) Conheça as ferramentas dotnet-counters, dotnet-trace e dotnet-dump. E aprenda como elas auxiliam no diagnóstico de uma aplicação .NET Core. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/05/12101840/debounce-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 9 anos atrás ## [ O que é Debounce e qual sua importância para a performance? ](https://www.treinaweb.com.br/blog/o-que-e-debounce-e-qual-sua-importancia-para-a-performance) Veja como a técnica de Debounce pode te ajudar a cuidar da performance da sua aplicação. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/06/27155937/js-symbol-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 8 anos atrás ## [ JavaScript: você sabe o que são e por que usar Symbols? ](https://www.treinaweb.com.br/blog/javascript-voce-sabe-o-que-sao-e-por-que-usar-symbols) Descubra a utilidade dos Symbols no JavaScript, novo tipo primitivo introduzido no ES2015. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/04195644/php-background-400x280.jpg) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Estrutura interna de valor, referências e gerenciamento de memória no PHP ](https://www.treinaweb.com.br/blog/estrutura-interna-de-valor-referencias-e-gerenciamento-de-memoria-no-php) Valores em PHP possuem que semântica? De valor ou de referência? Objetos são passados por referência? Essas são algumas das questões que esse artigo se propõe a responder. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12132017/introducao-swoole-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Trabalhando com corrotinas, canais e explorando um pouco mais o scheduler de corrotinas do Swoole ](https://www.treinaweb.com.br/blog/trabalhando-com-corrotinas-canais-e-explorando-um-pouco-mais-o-scheduler-de-corrotinas-do-swoole) Neste artigo trabalharemos com os conceitos fundamentais de corrotinas, canais, defer etc, também exploraremos algumas opções do scheduler como, por exemplo, fazê-lo operar de forma preemptiva. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/CICLO-VIDA-REACT-400x280.jpg) [ React ](https://www.treinaweb.com.br/blog/categoria/react) 4 anos atrás ## [ Ciclo de vida de componentes funcionais no React ](https://www.treinaweb.com.br/blog/ciclo-de-vida-de-componentes-funcionais-no-react) Como funciona o ciclo de vida de componentes funcionais no React para manipular a inicialização, atualização e limpeza de um componente React Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/05/como-instalar-o-csharp-e-nosso-primeiro-exemplo-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 4 anos atrás ## [ Estruturas condicionais e de repetição no C# ](https://www.treinaweb.com.br/blog/estruturas-condicionais-e-de-repeticao-no-csharp) Veremos nesse artigo sobre quais são e como podemos utilizar as estruturas condicionais e as estruturas de repetição no C# Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/05/Criando_componente_snackbar_com_JavaScript_e_CSS-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ Criando componente snackbar com JavaScript e CSS ](https://www.treinaweb.com.br/blog/criando-componente-snackbar-com-javascript-e-css) Nesse artigo, você irá ter o passo a passo de como criar um componente de snackbar do zero. Sendo capaz de adapta-lo como preferir. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/24110903/O-QUE-E-REACT-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Criando aplicações React com Vite e TypeScript ](https://www.treinaweb.com.br/blog/criando-aplicacoes-react-com-vite-e-typescript) Neste artigo veremos como criar aplicações React com Vite, que permite desenvolvermos aplicações modernas com recursos como HMR, entre outros. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **14h 10min 24s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58