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 à :

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> | none


<counter-style> = <counter-style-name> | symbols()


<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 initialedisc
Applicabilitééléments de liste
Héritéeoui
Valeur calculéecomme spécifié
Type d'animationdiscrète

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi