CSS
tellers

Syntaxis

• counter-set: [<tellernaam> <integer>? ] + | geen

• counter-reset: [<tellernaam> <integer>? ] + | geen

• counter-increment: [<tellernaam> <integer>? ] + | geen

• counter (<counter-name> [, <counter-style>]?)

• tellers (<counter-name>, <connector-string> [, <counter-style>]?)

parameters

Opmerkingen

Stijlen van Romeinse cijfers toepassen op de telleruitgang

CSS

body {
  counter-reset: item-counter;
}

.item {
  counter-increment: item-counter;
}

.item:before {
  content: counter(item-counter, upper-roman) ". "; /* by specifying the upper-roman as style the output would be in roman numbers */
}

HTML

<div class='item'>Item No: 1</div>
<div class='item'>Item No: 2</div>
<div class='item'>Item No: 3</div>

In het bovenstaande voorbeeld wordt de uitvoer van de teller weergegeven als I, II, III (Romeinse cijfers) in plaats van de gebruikelijke 1, 2, 3 omdat de ontwikkelaar de stijl van de teller expliciet heeft opgegeven.

Nummer elk item met behulp van CSS Counter

CSS

body {
  counter-reset: item-counter; /* create the counter */
}
.item {
  counter-increment: item-counter; /* increment the counter every time an element with class "item" is encountered */
}
.item-header:before {
  content: counter(item-counter) ". "; /* print the value of the counter before the header and append a "." to it */
}

/* just for demo */

.item {
  border: 1px solid;
  height: 100px;
  margin-bottom: 10px;
}
.item-header {
  border-bottom: 1px solid;
  height: 40px;
  line-height: 40px;
  padding: 5px;
}
.item-content {
  padding: 8px;
}

HTML

<div class='item'>
  <div class='item-header'>Item 1 Header</div>
  <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
  <div class='item-header'>Item 2 Header</div>
  <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
  <div class='item-header'>Item 3 Header</div>
  <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>

In het bovenstaande voorbeeld wordt elk "item" op de pagina .item-header en wordt het nummer van het item toegevoegd vóór de koptekst (met behulp content eigenschap content van .item-header element's :before pseudo). Een live demo van deze code is hier beschikbaar.

Nummering op meerdere niveaus implementeren met behulp van CSS-tellers

CSS

ul {
  list-style: none;
  counter-reset: list-item-number; /* self nesting counter as name is same for all levels */
}
li {
  counter-increment: list-item-number;
}
li:before {
  content: counters(list-item-number, ".") " "; /* usage of counters() function means value of counters at all higher levels are combined before printing */
}

HTML

<ul>
  <li>Level 1
    <ul>
      <li>Level 1.1
        <ul>
          <li>Level 1.1.1</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Level 2
    <ul>
      <li>Level 2.1
        <ul>
          <li>Level 2.1.1</li>
          <li>Level 2.1.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Level 3</li>
</ul>

Het bovenstaande is een voorbeeld van nummering op meerdere niveaus met behulp van CSS-tellers. Het maakt gebruik van het zelf-nestelende concept van tellers. Zelf nestelen is een concept waarbij als een element al een teller heeft met de gegeven naam maar een andere moet maken, het het creëert als een kind van de bestaande teller. Hier neemt het tweede niveau ul de list-item-number van de ouder, maar moet dan zijn eigen list-item-number (voor zijn kinderen li ) en maakt zo list-item-number[1] (teller voor tweede niveau) en nestelt het onder list-item-number[0] (teller voor eerste niveau). Zo bereikt het de nummering op meerdere niveaus.

De uitvoer wordt afgedrukt met behulp van de functie counters() in plaats van de functie counter() , omdat de functie counters() is ontworpen om de waarde van alle tellers met een hoger niveau (bovenliggend) voor te stellen bij het afdrukken van de uitvoer.