CSS räknare

Pizza

Hamburger

Hotdogs

CSS-räknare är "variabler" som bevaras av CSS. Deras värden kan ökas genom CSS-regler (de spårar deras användningsfrekvens).

Räknare låter dig justera utseendet baserat på innehållets plats i dokumentet.

Automatisk numrering med räknare

CSS-räknare liknar "variabler" i CSS. Variabelvärden kan ökas genom CSS-regler (de spårar deras användningsfrekvens).

För att använda CSS-räknare kommer vi att använda följande egenskaper:

  • counter-reset - skapa eller återställa räknare
  • counter-increment - öka räknarvärdet
  • content - lägg in genererat innehåll
  • counter() eller counters() funktionen - lägg till räknarvärdet till elementet

För att använda CSS-räknare måste du först använda counter-reset Skapa det.

Följande exempel skapar en räknare för sidan (i body-väljaren) och ökar räknarvärdet för varje <h2>-element och lägger till "Section <value of the counter>:" i början av varje <h2>-element:

Exempel

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Prova själv

Nästlade räknare

Följande exempel skapar en räknare för sidan (section) och skapar en räknare för varje <h1>-element (subsection).

"section"-räknaren räknar varje <h1>-element, och skriver in "Section" samt värdet för section-räknaren, "subsection"-räknaren räknar varje <h2>-element, och skriver in värdet för section-räknaren samt subsection-räknarens värde:

Exempel

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) " ";
}

Prova själv

Räknare är också mycket användbara för att skapa översiktslistor, eftersom en ny räknarinstans skapas automatiskt i underelementen. Här använder vi counters() Funktionen lägger in en sträng mellan olika nivåer av inbäddade räknare:

Exempel

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

Prova själv

CSS räknar egenskap

Egenskap Beskrivning
content Används tillsammans med ::before och ::after pseudoelement för att infoga genererat innehåll.
counter-increment Öka en eller flera räknarvärden.
counter-reset Skapa eller återställ en eller flera räknare.