List-style-type - Propriété CSS

Schéma de la syntaxe de list-style-type.

Description des termes utilisés sur le schéma :

• bullet est une puce prédéfinie : circle, square, etc.
• numbering est une numérotation prédéfinie : decimal, alphabetic, etc.
• string est un court texte spécifié entre guillemets ou apostrophes. Il sera utilisé à la place du marqueur.
• id est le nom d'une numérotation personnalisée définie avec @counter-style.

Description de la propriété list-style-type.

list-style-type définit le type de puces ou de numérotation à utiliser pour les listes ( balises li ).

Les feuilles de styles des navigateurs définissent des puces par défaut pour les 3 premiers niveaux d'imbrication, qui sont en général :

• Une puce noire circulaire pour le premier niveau.
• Une puce blanche circulaire pour le deuxième niveau.
• Et un carré noir pour le troisième niveau et les suivants.

Remarque : list-style-type est sans effet si une image a été définie par list-style-image, ou si la propriété content est appliquée au pseudo-élément ::marker avec la valeur none.

Reportez-vous aussi à la page sur la directive @counter-style qui permet de définir une numérotation personnalisée.
Et consultez également la propriété résumée list-style.

Syntaxes de list-style-type.

Les puces.

• list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: none;

  Plusieurs types de puces sont prédéfinies par CSS :

  • Un
  • Deux
  • Trois

  list-style-type:disc;
  Des puces circulaires noires

  • Un
  • Deux
  • Trois

  list-style-type:circle;
  Des puces circulaires blanches

  • Un
  • Deux
  • Trois

  list-style-type:square;
  Des puces carrées noires

  • Un
  • Deux
  • Trois

  list-style-type:none;
  Pas de puces

Valeurs pour numérotations en langue latine.

Toutes les numérotations sont basées sur un compteur interne nommé list-item, géré automatiquement. Mais il est cependant possible d'agir sur sa configuration avec les propriétés counter-increment, counter-set et counter-reset.

• list-style-type: decimal; list-style-type: decimal-leading-zero;

  Numérotation décimale (classique), en chiffres.

  La valeur decimal-leading-zero affiche toujours deux digits, les nombres de 1 à 9 étant précédés d'un zéro.

  Les numérotations de type décimal commencent avec le deuxième symbole (sachant que le premier symbole est le zéro), et se poursuit jusqu'au dernier symbole (le 9). Puis on recommence avec deux chiffres, en incluant cette fois-ci le premier symbole : le zero.

  • Un
  • Deux
  • Trois

  list-style-type:decimal;
  Numérotation décimale classique

  • Un
  • Deux
  • Trois

  list-style-type:decimal-leading-zero;
  Numérotation décimale avec systématiquement deux digits
• list-style-type: lower-roman; list-style-type: upper-roman;

  Numérotation en chiffres romains minuscules ou majuscules.
  Ce type de numérotation utilise des lettres, avec les valeurs suivantes :

  I : 1

  V : 5

  X : 10

  L : 50

  C : 100

  D : 500

  M : 1000

  Lorsqu'un symbole est suivi d'un autre symbole de valeur égale ou inférieure, les valeurs des deux symboles s'ajoutent. Dans le cas contraire la valeur du premier symbole est retranchée de celle du symbole suivant.
  La numérotation romaine ne permet pas de représenter le nombre zéro.

  • Un
  • Deux
  • Trois
  • Quatre

  list-style-type:lower-roman;

  • Un
  • Deux
  • Trois
  • Quatre

  list-style-type:upper-roman;
• list-style-type: lower-alpha; list-style-type: lower-latin; list-style-type: upper-alpha; list-style-type: upper-latin;

  Les numérotations alpha et latin sont synonymes. Ce sont des numérotations alphabétiques en caractères latin, minuscules ou majuscules.

  Les numérotations alphabétiques commencent avec le premier symbole (le a), se continuent jusqu'au dernier symbole (le z), puis reprend avec deux lettres, en recommençant au premier symbole.

  • Un
  • Deux
  • Trois

  list-style-type:lower-alpha;

  • Un
  • Deux
  • Trois

  list-style-type:lower-latin;

  • Un
  • Deux
  • Trois

  list-style-type:upper-alpha;

  • Un
  • Deux
  • Trois

  list-style-type:upper-latin;

Valeurs pour une numérotations en langue non latine.

• list-style-type: armenian; list-style-type: cjk-decimal; list-style-type: georgian; list-style-type: tibetan; Etc.

  Numérotation en caractères nationaux. De très nombreuses langues sont reconnues : armenian, cjk-ideographic, georgian, etc. Reportez-vous au simulateur, en bas de cette page pour une liste plus complète et tester la compatibilité de votre navigateur.

  • Un
  • Deux
  • Trois

  list-style-type:armenian;

  • Un
  • Deux
  • Trois

  list-style-type:cjk-decimal;

  • Un
  • Deux
  • Trois

  list-style-type:georgian;

  • Un
  • Deux
  • Trois

  list-style-type:tibetan;

Syntaxes de list-style-type - Numérotations personnalisées.

• list-style-type: '> ';

  La chaîne de caractères spécifiée est utilisée comme puce. Elle doit être indiquée entre apostrophes ou entre guillemets.
  Pour insérer un caractère non disponible au clavier, vous pouvez utiliser le signe \ suivi du code hexadécimal du caractère :
  Exemple : list-style-type: '\A9 ';

  • One
  • Two
  • Three

  list-style-type:'> ';

  • One
  • Two
  • Three

  list-style-type:'\bb ';
• list-style-type: symbols(alphabetic '⓵' '⓶' '⓷'); ⚠

  La fonction symbols() permet de définir le type de numérotation et les caractères à utiliser pour la numérotation. Reportez-vous à la description de la fonction symbols().

  ⚠ Certains navigateurs comme Chrome ne traitent pas cette syntaxe. Utilisez plutôt une numérotation personnalisée avec @counter-style (voir ci-après).

  • Un
  • Deux
  • Trois
  list-style-type:symbols(alphabetic '⓵' '⓶' '⓷');
  • Un
  • Deux
  • Trois
  list-style-type:symbols(alphabetic '➊' '➋' '➌' '➍' '➎');
• list-style-type: cards;

  Ici cards est le nom d'une numérotation personnalisée définie par @counter-style. Avec la directive @counter-style tout est paramétrable : le type de numérotation, les symboles à utiliser, un préfixe et un suffixe éventuels, etc.

  Le nom de la numérotation ne doit pas être spécifié entre guillemets ni apostrophes.

  Ici nous avons choisi une numérotation numérique classique, mais les chiffres de 1 à 9 ont été remplacés par des cartes à jouer. Les numérotations numériques nécessitant une valeur 0, c'est le dos de la carte qui fera figure de valeur nulle.

  • Un
  • Deux
  • Trois
  • Quatre
  • Cinq
  • Six
  list-style-type:cards;
• list-style-type: initial; (disc) list-style-type: inherit; list-style-type: revert; list-style-type: revertLayer; list-style-type: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de list-style-type.

L'animation de list-style-type est possible. En voici un petit exemple : l'animation est appliquée sur chacun des éléments li avec un délai au départ d'autant plus important que l'élément est situé vers la fin de la liste. C'est ce qui provoque cet effet de glissement vers le bas.

• Un
• Deux
• Trois
• Quatre
• Cinq

Accéder à la propriété list-style-type par programme.

Modifier la valeur de list-style-type en Javascript.

En Javascript, voici comment modifier la valeur de list-style-type. On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots) plus habituelle en Javascript.

let el = document.getElementById('id'); el.style['list-style-type'] = 'decimal'; // ou let el = document.getElementById('id'); el.style.listStyleType = 'decimal';

Lire en Javascript la valeur de list-style-type.

Pour que ce code fonctionne, la propriété doit avoir été affectée dans le code HTML directement à l'élément lui-même via son attribut style, et non pas en passant par un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['list-style-type']; // ou let el = document.getElementById('id'); let value = el.style.listStyleType;

Lire la valeur calculée de list-style-type en Javascript.

La valeur calculée résulte de l'évaluation de la cascade des héritages et des règles de priorité. A défaut cela sera la valeur initiale de la propriété.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('list-style-type');

Modifier la valeur de la propriété list-style-type avec JQuery.


$('#id').css('list-style-type', 'decimal');
// ou
$('#id').css('listStyleType', 'decimal');


Lire la valeur calculée de la propriété list-style-type avec JQuery.

let value = $('#id').css('list-style-type');

Tester par vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété list-style-type et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Dans le cas de list-style-type cela ne fera pas de différences car la propriété n'accepte que des valeurs prédéfinies.

Exemple interactif avec la propriété list-style-type.

Sélectionnez un type de puce ou de numérotation pour list-style-type et constatez le changement dans la liste de couleurs en dessous. Les valeurs non supportées par votre navigateur actuel s'affichent en rouge.

A titre d'exemple nous avons ajouté deux numérotations personnalisées :

• cards : une numérotation numérique classique avec les chiffres remplacés par des cartes à jouer, le dos figurant la valeur 0.
• dices : une numérotation alphabétique utilisant des dés à jouer pour représenter les valeurs. Pas de valeur zéro avec des dés, nous avons donc opté pour une numérotation alphabétique.

Compatibilité des navigateurs avec list-style-type.

La propriété list-style-type est bien reconnue par les navigateurs actuels. Cependant, parmi la multitude de numérotations en langues non latines, il reste des non compatibilités.
La fonction symbols() pose également des problèmes sur de nombreux navigateurs.

1

Propriété
list-style-type

2

Fonction
symbols()

Estimation de la prise en charge globale.

96%

3%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Chrome

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété list-style-type.

• CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1

  Ce premier niveau de la spécification CSS décrit le mécanisme des feuilles de styles en cascade. Les auteurs et les lecteurs peuvent ajouter des styles aux documents. Principalement destiné à la mise en forme des documents HTML, CSS permet de définir les couleurs, les polices de caractères, la mise en forme du texte, les espacements (marges), etc. Le langage CSS est d'une compréhension aisée, lisible et facile à rédiger, il utilise les termes courants de la publication de bureau.

  Concernant list-style-type. Définition initiale de la propriété list-style-type, acceptant les valeurs disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha et none.
  

  17 Novembre 1995

  Document de travail.

  

  12 Novembre 1996

  Proposé à la recommandation.

  

  17 Décembre 1996

  Recommandation.

  

  13 Septembre 2018

  Ancienne spécification, déclarée obsolète.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.

  Concernant list-style-type. Ajout de nouveaux formats de numérotation pour la propriété list-style-type : decimal-leading-zero, upper-latin, armenian, georgian, lower-greek, lower-latin et inherit.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Listes et compteurs - Niveau 3

  Concernant list-style-type. Ajout de formats de numérotation dans de nombreuses langues (décrits dans un module sséparé).
  Possibilité de spécifier une chaîne de caractères en tant que marqueur.
  

  20 Février 2002

  Document de travail.

  

  

  

• Module CSS -Stylisation des compteurs - Niveau 3

  Concernant list-style-type. Description détaillée des styles de compteurs et des numérotations internationales.
  

  09 Octobre 2012

  Document de travail.

  

  03 Février 2015

  Candidat à la recommandation.

  

  

Voir aussi, au sujet des listes et numérotations.

Les listes et numérotations sont décrites dans ce module : Module CSS - Listes et compteurs. La propriété list-style-type fait partie de ce module ainsi que les définitions suivantes :

Propriétés :

Fonctions :