playlistOrder est un identifiant. Ça aurait pu être "choucroute" ou "panierGarni".
Un exemple rapide:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css">
ol#test {list-style: none; counter-reset: choucroute;}
ol#test li {counter-increment: choucroute 4;}
ol#test li:before {content: counter(choucroute) ")";}
</style>
</head>
<body>
<ol id="test">
<li>
<em>Avec le vent</em>
</li>
<li>
<em>Le Pingouin</em>
</li>
<li>
<em>Titre musical…</em>
</li>
</ol>
</body>
</html>
Explications pour le CSS:
ol#test {counter-reset: choucroute;}
À chaque occurence d'un élément
ol ayant pour identifiant "test" (normalement, une seule occurrence par document), le compteur nommé "choucroute" est remis à zéro.
ol#test li {counter-increment: choucroute 4;}
À chaque occurrence d'un
li descendant d'ol#test, le compteur nommé "choucroute" est incrémenté de 4.
ol#test li:before {content: counter(choucroute) ")";}
Pour chaque
li descendant d'ol#test, on génère un contenu avant qui utilise notamment la valeur courante du compteur "choucroute".
On notera qu'on n'a pas eu besoin de déclarer le compter "choucroute" nulle part dans le CSS: on l'a directement mis à zéro, incrémenté, utilisé.
Modifié par Florent V. (22 Oct 2007 - 11:30)
