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

<custom-ident>: Un identifiant correspondant à la valeur d'un @counter-style ou à un style prédéfini :
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
disc: Un disque plein (la valeur par défaut)
circle: Un cercle vide
square: Un carré plein
decimal: Des nombres décimaux, commençant par 1.
cjk-decimal: Des nombres décimaux Han.
decimal-leading-zero: Des nombres décimaux complétés par des 0.
lower-roman: Des chiffres romains en minuscules.
upper-roman: Des chiffres romains en majuscules.
lower-greek: Des lettres grecques en minuscules.
lower-alpha, lower-latin: Des lettres ASCII en minuscules.
upper-alpha, upper-latin: Des lettres ASCII en majuscules.
arabic-indic, -moz-arabic-indic: Des nombres arabo-indiens.
armenian: La numérotation arménienne traditionnelle.
bengali, -moz-bengali: La numérotation bengali.
cambodian/khmer: La numérotation cambodgienne/khmer.
cjk-earthly-branch, -moz-cjk-earthly-branch: Des nombres ordinaux Han de la « branche terrestre ».
cjk-heavenly-stem, -moz-cjk-heavenly-stem: Des nombres ordinaux Han de la « souche céleste ».
cjk-ideographic: Identique à trad-chinese-informal.
devanagari, -moz-devanagari: La numérotation devanagari.
ethiopic-numeric: La numérotation éthiopienne.
georgian: La numérotation géorgienne traditionnelle.
gujarati, -moz-gujarati: La numérotation gujarati.
gurmukhi, -moz-gurmukhi: La numérotation gurmukhi.
hebrew: La numérotation hébraïque traditionnelle
hiragana: Le lettrage lexicographique hiragana.
hiragana-iroha: Le lettrage Iroha-order hiragana.
japanese-formal: La numérotation japonaise formelle utilisée pour les documents financiers ou légaux. Les kanjis sont conçus afin de ne pas pouvoir être modifié pour ressembler à un autre.
japanese-informal: La numérotation japonaise informelle.
kannada, -moz-kannada: La numérotation kannada.
katakana: Le lettrage lexicographique katakana.
katakana-iroha: Le lettrage Iroha-order katakana.
korean-hangul-formal: La numérotation coréenne hangul.
korean-hanja-formal: La numérotation formelle coréenne Han.
korean-hanja-informal: La numérotation coréenne hanja.
lao, -moz-lao: La numérotation laotienne.
lower-armenian *: La numérotation arménienne en minuscules.
malayalam, -moz-malayalam: La numérotation Malayalam.
mongolian: La numérotation mongolienne.
myanmar, -moz-myanmar: La numérotation birmane.
oriya, -moz-oriya: La numérotation Oriya.
persian , -moz-persian: La numérotation perse.
simp-chinese-formal: La numérotation formelle en chinois simplifié.
simp-chinese-informal: La numérotation informelle en chinois simplifié.
tamil , -moz-tamil: La numérotation tamoule.
telugu, -moz-telugu: La numérotation Telugu.
thai, -moz-thai: La numérotation thaïlandaise.
tibetan *: La numérotation tibétaine.
trad-chinese-formal: La numérotation formelle en chinois traditionnel.
trad-chinese-informal: La numérotation informelle en chinois traditionnel.
upper-armenian *: La numérotation arménienne traditionnelle en majuscules.
disclosure-open: Un symbole indiquant qu'un contrôle de révélation (tel qu'un élément <details>) est déplié/révélé.
disclosure-closed: Un symbole indiquant qu'un contrôle de révélation (tel qu'un élément <details>) est replié/masqué.

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