CSS-räknare


Innehållsförteckning

    Visa innehållsförteckning


Pizza

Hamburger

Hotdogs

CSS-räknare är "variabler" som underhålls av CSS vars värden kan ökas med CSS-regler (för att spåra hur många gånger de används). Med räknare kan du justera innehållets utseende baserat på dess placering i dokumentet.


Automatisk numrering med räknare

CSS-räknare är som "variabler". Variabelvärdena kan ökas med CSS-regler (som spårar hur många gånger de används).

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

counter-reset

- Skapar eller återställer en räknare

counter-increment

- Ökar ett räknarvärde

content

- Infogar genererat innehåll

counter() or counters() function

- Lägger till värdet av en räknare till ett element

För att använda en CSS-räknare måste den först skapas med räknare-återställning.

Följande exempel skapar en räknare för sidan (i kroppsväljaren), ökar sedan räknarvärdet för varje <h2>-element och lägger till "Sektions värde för räknaren:" till början av varje <h2>-element:

Exempel

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

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
</style>
</head>
<body>

<h1>Using CSS Counters</h1>

<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Python Tutorial</h2>
<h2>SQL Tutorial</h2>

</body>
</html>




Häckande räknare

Följande exempel skapar en räknare för sidan (sektionen) och en räknare för varje <h1>-element (undersektion). "Sektions"-räknaren kommer att räknas för varje <h1>-element med "Sektions värde av sektionsräknaren.", och "undersektion"-räknaren kommer att räknas för varje <h2>-element med "<värde på sektionsräknaren.värde på undersektionsräknaren":

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 →

<!DOCTYPE html>
<html>
<head>
<style>
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) " ";
}
</style>
</head>
<body>


<h1>HTML/CSS Tutorials</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>Bootstrap</h2>
<h2>W3.CSS</h2>

<h1>Scripting Tutorials</h1>
<h2>JavaScript</h2>
<h2>jQuery</h2>
<h2>React</h2>

<h1>Programming Tutorials</h1>
<h2>Python</h2>
<h2>Java</h2>
<h2>C++</h2>

</body>
</html>


En räknare kan också vara användbar för att göra konturlistor eftersom en ny instans av en räknare skapas automatiskt i underordnade element. Här använder vi counters() funktion för att infoga en sträng mellan olika nivåer av kapslade räknare:

Exempel

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

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

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}
</style>
</head>
<body>

<ol>
  <li>item</li>
  <li>item   
  <ol>
    <li>item</li>
    <li>item</li>
    <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
    </li>
    <li>item</li>
  </ol>
  </li>
  <li>item</li>
  <li>item</li>
</ol>

<ol>
  <li>item</li>
  <li>item</li>
</ol>

</body>
</html>



Egenskaper för CSS-räknare

content

Används med ::before och ::after pseudo-elementen, för att infoga genererat innehåll

counter-increment

Ökar ett eller flera räknarvärden

counter-reset

Skapar eller återställer en eller flera räknare

counter()

Returnerar det aktuella värdet för den namngivna räknaren