Contadores de Lista Aninhada com CSS

Introdução

Neste laboratório, exploraremos o uso de contadores CSS (CSS counters) para criar contadores de lista personalizados. Especificamente, aprenderemos como inicializar e incrementar variáveis de contador, e como exibir o valor dessas variáveis usando a função counters(). Ao final deste laboratório, você será capaz de criar contadores de lista aninhados e personalizar a aparência dos elementos da lista usando CSS.

Contador (Counter)

index.html e style.css já foram fornecidos na VM.

Para criar um contador de lista personalizado que contabilize elementos de lista aninhados, siga estes passos:

1. Use counter-reset para inicializar uma variável de contador (padrão 0), sendo o nome o valor do atributo (por exemplo, counter).
2. Use counter-increment na variável de contador para cada elemento contável (por exemplo, cada <li>).
3. Use counters() para exibir o valor de cada variável de contador como parte do content do pseudo-elemento ::before para cada elemento contável (por exemplo, cada <li>). O segundo valor passado para ele ('.') atua como o delimitador para contadores aninhados.

Aqui está um exemplo de código HTML:

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>
    List item
    <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

E aqui está o código CSS para aplicar o contador de lista personalizado:

ul {
  counter-reset: counter;
  list-style: none;
}

li::before {
  counter-increment: counter;
  content: counters(counter, ".") " ";
}

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório de Contador (Counter). Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.