list-style-type

La propriété list-style-type permet de définir l'apparence de la puce d'un élément de liste (un cercle, un caractère, un compteur spécifique, etc.).

La couleur de la puce utilisée sera la même que la couleur calculée de l'élément sur lequel elle s'applique.

Cette propriété s'applique aux éléments d'une liste (c'est-à-dire les éléments pour lesquels on a display: list-item;. Cela inclut par défaut les éléments <li> et <summary>. Il est possible de l'utiliser pour d'autres éléments si on utilise display: list-item sur ceux-ci. Cette propriété est héritée et on peut donc l'appliquer aux éléments parents (généralement <ol> ou <ul>) afin qu'elle s'applique à l'ensemble des éléments fils.

Syntaxe

/* Liste partielle des mots-clés utilisables */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: cjk-ideographic;
list-style-type: kannada;

/* Une chaîne de caractères */
/* Type <string>            */
list-style-type: '-';

/* Un identifiant correspondant à */
/* une règle @counter-style       */
list-style-type: custom-counter-style;

/* Valeur avec un mot-clé */
list-style-type: none;

/* Valeurs globales */
list-style-type: inherit;
list-style-type: initial;
list-style-type: unset;

La propriété list-style-type peut être définie grâce à :

une valeur <custom-ident>
une valeur symbols()
une valeur <string>
au mot-clé none

Valeurs

symbols(): Définit un style de puce utilisé.
none: Aucun marqueur n'est affiché.
<string>: La chaîne de caractères indiquée sera utilisée comme puce
<custom-ident>: Un identifiant correspondant à la valeur d'un @counter-style ou à un style prédéfini :

disc

Un disque plein (la valeur par défaut)

circle

Un cercle vide

square

Un carré plein

decimal

Des nombres en base 10
Commençant par 1

cjk-decimal

Nombres décimaux Han
E.g. 一, 二, 三, ..., 九八, 九九, 一〇〇

decimal-leading-zero

Nombres en base 10
Avec des 0 devant
E.g. 01, 02, 03, … 98, 99

lower-roman

Nombres romains minuscules
Par exemple i, ii, iii, iv, v…

upper-roman

Nombres romains en majuscules
Par exemple I, II, III, IV, V…

lower-greek

Lettres grecques minuscules
alpha, beta, gamma…
Par exemple α, β, γ…

lower-alpha

lower-latin

Lettres ASCII en minuscules
Par exemple a, b, c, … z
lower-latin n'est pas pris en charge par les versions avant IE7
Voir le tableau de compatibilité

upper-alpha

upper-latin

Lettres ASCII en majuscules
Par exemple A, B, C, … Z
upper-latin n'est pas pris en charge par les versions avant IE7

arabic-indic

-moz-arabic-indic

Exemple

armenian

Système de numérotation arménien
(ayb/ayp, ben/pen, gim/keem…

bengali

-moz-bengali

Exemple

cambodian *

Exemple
est un synonyme pour khmer

cjk-earthly-branch

-moz-cjk-earthly-branch

Exemple

cjk-heavenly-stem

-moz-cjk-heavenly-stem

Exemple

cjk-ideographic

Identique à trad-chinese-informal
E.g. 一萬一千一百一十一

devanagari

-moz-devanagari

Exemple

ethiopic-numeric

Exemple

georgian

Système de numérotation géorgien
Par exemple an, ban, gan, … he, tan, in…

gujarati

-moz-gujarati

Exemple

gurmukhi

-moz-gurmukhi

Exemple

hebrew

Système de numérotation hébreux

hiragana

あ, い, う, え, お, か, き , …
(Japonais)

hiragana-iroha

い, ろ, は, に, ほ, へ, と …
Iroha est l'ancien ordre japonais pour les syllabes.

japanese-formal

Système de numérotation japonais formel utilisé pour les documents légaux ou financiers.
E.g., 壱萬壱阡壱百壱拾壱
Ces kanjis ont été conçus afin de ne pas pouvoir être confondus avec d'autres

japanese-informal

Système de numérotation japonais informel

kannada

-moz-kannada

Exemple

katakana

ア, イ, ウ, エ, オ, カ, キ, …
(Japonais)

katakana-iroha

イ, ロ, ハ, ニ, ホ, ヘ, ト, …
Iroha correspond à l'ancien ordre japonais pour les syllabes.

khmer

-moz-khmer

Exemple

korean-hangul-formal

Système de numérotation coréen hangul .
E.g., 일만 일천일백일십일

korean-hanja-formal

Système de numérotation formel coréen Han.
E.g. 壹萬壹仟壹百壹拾壹

korean-hanja-informal

Système de numérotation coréen hanja numbering.
E.g., 萬一千百十一

lao

-moz-lao

Exemple

lower-armenian *

Exemple

malayalam

-moz-malayalam

Exemple

mongolian

Exemple

myanmar

-moz-myanmar

Exemple

oriya

-moz-oriya

Exemple

persian

-moz-persian

Exemple

simp-chinese-formal

Système de numérotation formel chinois simplifié.
E.g. 壹万壹仟壹佰壹拾壹

simp-chinese-informal

Système de numérotation informel chinois simplifié.
E.g. 一万一千一百一十一

tamil

-moz-tamil

Exemple

telugu

-moz-telugu

Exemple

thai

-moz-thai

Exemple

tibetan *

Exemple

trad-chinese-formal

Système de numérotation formel chinois traditionnel.
E.g. 壹萬壹仟壹佰壹拾壹

trad-chinese-informal

Système de numérotation informel chinois traditionnel.
E.g. 一萬一千一百一十一

upper-armenian *

Exemple

disclosure-open

Symbole indiquant qu'un widget (comme <details>) est ouvert.

disclosure-closed

Symbole indiquant qu'un widget (comme <details>) est fermé.

Extensions non-standards

D'autres types sont fournis par Gecko (Firefox), Blink (Chrome and Opera) and WebKit (Safari) mais ne sont pas standards. Pour voir les différents navigateurs les supportant, se référer au tableau de compatibilité en bas de page.

-moz-ethiopic-halehame

Exemple

-moz-ethiopic-halehame-am

Exemple

ethiopic-halehame-ti-er

-moz-ethiopic-halehame-ti-er

Exemple

ethiopic-halehame-ti-et

-moz-ethiopic-halehame-ti-et

Exemple

hangul

-moz-hangul

Exemple
Exemple
Exemple

hangul-consonant

-moz-hangul-consonant

Exemple
Exemple
Exemple

urdu

-moz-urdu

Exemple

Syntaxe formelle

<counter-style> | <string> | noneoù 
<counter-style> = <counter-style-name> | symbols()
où 
<counter-style-name> = <custom-ident>

Exemples

CSS

ol.normal {
  list-style-type: upper-alpha;
}

/* on peut aussi utiliser la propriété raccourcie */
/* "list-style": */
ol.shortcut {
  list-style: upper-alpha;
}

HTML

<ol class="normal">Liste 1
  <li>Coucou</li>
  <li>Monde</li>
  <li>Comment ça va ?</li>
</ol>

<ol class="shortcut">Liste 2
  <li>On a</li>
  <li>le</li>
  <li>même</li>
  <li>résultat</li>
</ol>

Résultat

Accessibilité

Le lecteur d'écran VoiceOver n'annonce pas, incorrectement, les listes non ordonnées lorsque list-style-type:none leur est appliqué. Pour pallier ce problème, on peut ajouter un espace sans chasse comme pseudo-contenu avant chaque élément de liste afin que la liste soit correctement annoncée.

ul {
  list-style-type: none;
}

ul li::before {
  content: "\200B";
}

Notes

Pour certains types, il est nécessaire d'avoir une police correspondante installée pour que l'affichage fonctionne.
Pour des raisons historiques, cjk-ideographic est synonyme de trad-chinese-informal.

Spécifications

Spécification	Statut	Commentaires
CSS Counter Styles Level 3 La définition de 'list-style-type' dans cette spécification.	Candidat au statut de recommandation	Les compteurs CSS2.1 sont redéfinis. La syntaxe est étendue pour prendre en charge les règles `@counter-style`. Définition des types : `hebrew`, `cjk-ideographic`, `hiragana`, `hiragana-iroha`, `katakana`, `katakana-iroha`, `japanese-formal`, `japanese-informal`, `simp-chinese-formal`, `trad-chinese-formal`, `simp-chinese-formal`, `trad-chinese-formal`,`korean-hangul-formal`, `korean-hanja-informal`, `korean-hanja-formal`, `cjk-decimal`, `ethiopic-numeric`, `disclosure-open` et `disclosure-closed`. `<counter-style>` est étendu avec la notation fonctionnelle `symbols()`.
CSS Lists Module Level 3 La définition de 'list-style-type' dans cette spécification.	Version de travail	La syntaxe est modifiée pour prendre en charge les identifiants utilisés avec les règles `@counter-style`. Prise en charge du type `<string>`.
CSS Level 2 (Revision 1) La définition de 'list-style-type' dans cette spécification.	Recommendation	Définition initiale.

Valeur initiale	`disc`
Applicabilité	éléments de liste
Héritée	oui
Valeur calculée	comme spécifié
Type d'animation	discrète

Compatibilité des navigateurs

BCD tables only load in the browser