CSS tæller

Pizza

Hamburger

Hotdogs

CSS-tællere er "variabler" holdt af CSS. Værdierne kan øges ved CSS-regler (de sporer deres brugsfrequency).

Tællere lader dig justere deres udseende baseret på deres placering i dokumentet.

Automatiseret nummerering med tæller

CSS-tællere er som "variabler" i CSS. Variabelværdier kan øges ved CSS-regler (de sporer deres brugsfrequency).

For at bruge CSS-tællere vil vi bruge følgende egenskaber:

  • counter-reset - opret eller nulstil tælleren
  • counter-increment - øg tællerværdien
  • content - indsæt genereret indhold
  • counter() eller counters() funktionen - tilføj tællerværdien til elementet

For at bruge CSS-tællere skal du først bruge counter-reset Opret det.

Nedenstående eksempel opretter en tæller for siden (i body-vælgeren) og øger tællerværdien for hver <h2>-element, og tilføjer "Section <værdi af tælleren>:" i begyndelsen af hvert <h2>-element:

Eksempel

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

Prøv det selv

Indlejrede tællere

Nedenstående eksempel opretter en tæller for siden (section) og opretter en tæller for hver <h1>-element (subsection).

"section"-tælleren tæller for hver <h1>-element, og skriver samtidig "Section" samt værdien af section-tælleren, "subsection"-tælleren tæller for hver <h2>-element, og skriver samtidig værdien af section-tælleren samt værdien af subsection-tælleren:

Eksempel

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

Prøv det selv

Tællere er også meget nyttige til at oprette oversigtslister, fordi der automatisk oprettes en ny tællerinstans i underelementer. Her bruger vi counters() Funktionen indsætter en streng mellem forskellige niveauer af indlejrede tællere:

Eksempel

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

Prøv det selv

CSS tæller egenskab

Egenskab Beskrivelse
content Brug sammen med ::before og ::after pseudo-elementer til at indsætte genereret indhold.
counter-increment Øg værdien af en eller flere tællere.
counter-reset Opret eller nulstil en eller flere tællere.