Fonctions listes

counter

Exemple:

li::before {
  content: "ITEM " counter(my-sec-counter, upper-roman) ". ";
}

Permet de récupérer la valeur d’un counter (incrémenté avec les propriétés counter-increment, counter-reset).

counter(<name>) | counter(<name>, <style>)

Quelques exemples:

li {
  counter-increment: my-counter1;
}
li::before {
  content: "ITEM " counter(my-counter1, upper-roman) ". ";
}

Hello
- Sub-item
World
- Sub-item

li {
  counter-increment: my-counter2;
}
li::before {
  content: "ITEM " counter(my-counter2, upper-roman) ". ";
}
li ul {
  counter-reset: my-counter;
}

Hello
- Sub-item
World
- Sub-item

JSFiddle counter

counters

Exemple:

.nested div::before {
  content: "DIV " counters(moncounter, ".");
}

Retourne la valeur du compteur, en ajoutant un sous-compteur à chaque fois qu’on reset.
Les compteurs sont séparés par le délimiteur donné en 2ème argument

counters(<name>, <delimiter>) | counters(<name>, <delimiter>, <style>)

Quelques exemples:

li {
  counter-increment: my-counter3;
}
li::before {
  content: "ITEM " counters(my-counter3, ".", upper-roman) ". ";
}
li ul {
  counter-reset: my-counter3;
}

Hello
- Sub-item
World
- Sub-item

symbols

Exemple:

li {
  list-style: symbols(cyclic "◉" "◌");
}

Permet de créer un nouveau style de puce à la volée [CSS3]
NB Contraitement à @counter-style, les listes de type additive et extends ne sont pas possible avec cette syntaxe.

list-type: symbols([cyclic | numeric | alphabetic | symbolic | fixed] [ <string> | <image> ]+);

Quelques exemples:

li {
  list-style: symbols(cyclic "◉" "◌");
}

This site is open source. Improve this page.