Contoare CSS. Nesting Counters. Funcția counters().

Susține Lectii-Virtuale!

Nesting Counters

Următorul exemplu creează un contor pentru pagină (section) și un contor pentru fiecare element <h1> (subsection). Contorul „section” va fi contorizat pentru fiecare element <h1> cu „secțiunea <valoarea secțiunii contorului>.”, Iar contorul „subsection” va fi contorizat pentru fiecare element <h2> cu „<valoarea contorului de secțiuni >. <valoarea contorului de subsecțiuni> ":

Exemplu:

body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Un contor poate fi de asemenea util pentru a crea liste conturate, deoarece o nouă instanță a unui contor este creată automat în elementele copil. Aici folosim funcția counters()  pentru a insera o șir între diferitele niveluri de nested counters:

Exemplu:

ol {
  counter-reset: section;
  list-style-type: none;
}

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