Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

list-style-type - Propriété CSS

list-style-type

Résumé des caractéristiques de la propriété list-style-type

Description rapide
Définit le type des puces ou de la numérotation.
Statut
Standard
S'applique à
Éléments de listes.
Type de valeur
Valeur prédéfinie | Compteur | Texte
Valeurs prédéfinies
disc | none | square | disclosure-closed | disclosure-open | decimal | decimal-leading-zero | lower-latin | upper-latin | lower-alpha | lower-roman | upper-alpha | upper-roman | lower-greek | upper-greek
Pourcentages
Ne s'appliquent pas.
Valeur initiale
disc
Héritée par défaut
Oui
Type d'animation
Discrète : lors d'une animation, la propriété list-style-type passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Listes et compteurs
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: Ancienne norme, obsolète

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

Définit le type de puces ou de numérotation à utiliser pour les listes ( balises li ). Cette propriété est inopérante si une image est définie par list-style-image.

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 de façon très précise.
Et consultez également la propriété résumée list-style.

Syntaxes de list-style-type - Puces.

  • list-style-type: disc;
    1. Un
    2. Deux
    3. Trois

    Puce circulaire noire.

  • list-style-type: circle;
    1. Un
    2. Deux
    3. Trois

    Puce circulaire blanche.

  • list-style-type: square;
    1. Un
    2. Deux
    3. Trois

    Puce carrée noire.

  • list-style-type: none;
    1. Un
    2. Deux
    3. Trois

    Aucune puce, ni aucun numéro.

  • Syntaxes de list-style-type - Numérotations en langue latine.

  • list-style-type: decimal; list-style-type: decimal-leading-zero;
    1. Un
    2. Deux
    3. Trois
    1. Un
    2. Deux
    3. Trois

    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. Elle n'est pas bien reconnue par les navigateurs.

    La numérotation décimale commence 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 zéro.

  • list-style-type: lower-roman; list-style-type: upper-roman;
    1. Un
    2. Deux
    3. Trois
    1. Un
    2. Deux
    3. Trois

    Numérotation en chiffres romains minuscules ou majuscules.

  • list-style-type: lower-alpha; list-style-type: lower-latin; list-style-type: upper-alpha; list-style-type: upper-latin;
    1. Un
    2. Deux
    3. Trois
    1. Un
    2. Deux
    3. Trois

    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 continue jusqu'au dernier symbole (le z), puis reprend avec deux lettres, en recommençant au premier symbole.

  • Syntaxes de list-style-type - Langues non latines.

  • list-style-type: armenian;
    1. Un
    2. Deux
    3. Trois
    1. Un
    2. Deux
    3. Trois

    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.

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

  • list-style-type: '> ';
    1. Un
    2. Deux
    3. Trois

    La chaîne de caractères spécifiée est utilisée comme puce. La valeur doit être indiquée entre apostrophes ou entre guillemets.

  • list-style-type: symbols(alphabetic '⓵' '⓶' '⓷');
    1. Un
    2. Deux
    3. Trois
    1. Un
    2. Deux
    3. Trois

    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 traite pas cette syntaxe. Utilisez plutôt une numérotation personnalisée avec @counter-style (voir ci-après).

  • list-style-type: cards;
    1. Un
    2. Deux
    3. Trois
    4. Quatre
    5. Cinq

    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 l'énumération 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.

  • list-style-type: initial; list-style-type: inherit; list-style-type: revert; list-style-type: revert-layer; list-style-type: unset;

    La valeur initiale est : disc.

Animation de la propriété 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

Manipulation de la propriété list-style-type par programme.

La liste ci-dessous (de trois éléments) est une balise ul. On voit que la modification de la valeur de list-style-type est immédiatement répercutée sur l'affichage.

  • Premier élément.
  • Deuxième élément.
  • Troisième élément.

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.


function setListStyleType(el) {
el.style['list-style-type']='decimal';
// ou
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.


function getListStyleType(el) {
alert(el.style['list-style-type']);
// ou
alert(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é.


function getCalcListStyleType(el) {
alert(window.getComputedStyle(el).getPropertyValue('list-style-type'));
}

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


function setListStyleType(el) {
$(el).css('list-style-type','lower-alpha');
// ou
$(el).css('listStyleType','lower-alpha');
}

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


function getCalcListStyleType(el) {
alert($(el).css('list-style-type'));
// ou
alert($(el).css('listStyleType'));
}

Simulateur.

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.
list-style-type :
  • AliceBlue
  • AntiqueWhite
  • Aqua
  • AquaMarine
  • Azure
  • Beige
  • Bisque
  • Black
  • BlanchedAlmond
  • Blue
  • BlueViolet
  • Brown
  • BurlyWood
  • CadetBlue
  • Chartreuse
  • Chocolate
  • Coral
  • CornflowerBlue
  • Cornsilk
  • Crimson
  • Cyan
  • DarkBlue
  • DarkCyan
  • DarkGoldenRod
  • DarkGray
  • DarkGreen
  • DarkKhaki
  • DarkMagenta
  • DarkOliveGreen
  • DarkOrange
  • DarkOrchid
  • DarkRed
  • DarkSalmon
  • DarkSeaGreen
  • DarkSlateBlue
  • DarkSlateGray
  • DarkTurquoise
  • DarkViolet
  • DeepPink
  • DeepSkyBLue
  • DimGray
  • DodgerBlue
  • Feldspar
  • FireBrick
  • FloralWhite
  • ForestGreen
  • Fuchsia
  • Gainsboro
  • GhostWhite
  • Gold
  • GoldenRod
  • Gray
  • Green
  • GreenYellow
  • HoneyDew
  • HotPink
  • IndianRed
  • Indigo
  • Ivory
  • Khaki

Prise en charge par les navigateurs (compatibilité).

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.

Colonne 1
Support de la propriété list-style-type.
Colonne 2
Support de la fonction symbols() utilisée dans la syntaxe de list-style-type pour définir les symboles utilisés pour la numérotation.
1
list-style-type
2
symbols()
Estimation de la prise en charge en pourcentage du parc actuel.
95%
3%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que list-style-type.

Les spécifications CSS éditées par le W3C sont organisées en modules. list-style-type fait partie du Module CSS - Listes et compteurs (CSS Lists and Counters Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit le pas d'incrémentation d'un compteur.
Initialise un compteur.
Change la valeur d'un ou de plusieurs compteurs.
Résumé des caractéristiques de listes à puces ou numérotées.
Définit une image à utiliser à la place des puces.
Définit l'emplacement des marqueurs de listes (puces ou numéros).
Définit le côté où se positionne le marqueur de liste (fonction de la langue).

Fonctions.

Renvoie la valeur actuelle d'un compteur.
Renvoie la valeur d'un compteur hiérarchique.