Propriété CSS list-style-type

La propriété CSS list-style-type définit le marqueur d'un élément de liste — la puce, le numéro ou la lettre affichés avant chaque élément. Elle permet de remplacer la puce pleine par défaut d'une liste non ordonnée par un cercle vide ou un carré, de changer la numérotation 1, 2, 3 d'une liste ordonnée en chiffres romains ou en lettres, ou de supprimer entièrement le marqueur.

Ce que couvre cette propriété

Un marqueur de liste peut être de trois types :

Glyphes — une forme simple : disc (la puce pleine par défaut), circle (un anneau vide) ou square.
Systèmes de numérotation — des compteurs tels que decimal, decimal-leading-zero, lower-roman, upper-roman, armenian, georgian, cjk-ideographic, hebrew, hiragana et katakana.
Systèmes alphabétiques — des séquences de lettres telles que lower-alpha/lower-latin (a, b, c) et upper-alpha/upper-latin (A, B, C), ainsi que lower-greek (α, β, γ).

La couleur du marqueur correspond à la valeur calculée de color de l'élément auquel il s'applique ; modifier la couleur du texte modifie donc aussi la couleur du marqueur. Vous pouvez choisir une couleur dans la référence des couleurs HTML.

Quand et où l'utiliser

Seuls les éléments dont la valeur display est list-item affichent un marqueur. Par défaut, cela concerne les éléments <li> et <summary>, mais vous pouvez appliquer ce comportement à n'importe quel élément en définissant display: list-item. En pratique, vous appliquez list-style-type sur le parent <ul> ou <ol> et laissez la valeur s'hériter sur chaque <li> — la propriété s'hérite, les enfants n'en ont donc pas besoin.

Utilisez list-style-type: none lorsque vous souhaitez un menu de navigation épuré ou une mise en page personnalisée sans puces. Les valeurs de numérotation et alphabétiques fonctionnent sur les <ul> et les <ol>, mais elles sont plus significatives sur les <ol>, où chaque élément représente une étape ou une position classée.

list-style-type est l'une des trois propriétés de liste que regroupe le raccourci list-style — les deux autres sont list-style-position (marqueur à l'intérieur ou à l'extérieur de la boîte de contenu) et list-style-image (une image de marqueur personnalisée, qui remplace le type lorsqu'elle est définie).

Valeur initiale	disc
S'applique à	Éléments de liste.
Héritage	Oui.
Animatable	Non.
Version	CSS1
Syntaxe DOM	object.style.listStyleType = "armenian";

Syntaxe

Syntaxe de la propriété CSS list-style-type

list-style-type: disc | armenian | circle | cjk-ideographic | decimal | decimal-leading-zero | georgian | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-alpha | lower-greek | lower-latin | lower-roman | none | square | upper-alpha | upper-latin | upper-roman | initial | inherit;

Exemple de la propriété list-style-type :

Exemple de la propriété CSS list-style-type avec les valeurs square et hebrew

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul.list-styles {
        list-style-type: square;
      }
      ul.list-styles2 {
        list-style-type: hebrew;
      }
    </style>
  </head>
  <body>
    <h2>List-style-type property example</h2>
    <ul class="list-styles">
      <li>Appetizers</li>
      <li>Main Course</li>
      <li>Salads</li>
    </ul>
    <ul class="list-styles2">
      <li>Cold Drinks</li>
      <li>Hot Drinks</li>
      <li>Ice-Creams</li>
    </ul>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de la propriété list-style-type avec la valeur « disc » :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        list-style-type: disc;
      }
    </style>
  </head>
  <body>
    <h1> 
      Example of the list-style-type property with "disc" value.
    </h1>
    <ul class="text">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>London</li>
    </ul>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété list-style-type avec la valeur « decimal » :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        list-style-type: decimal;
      }
    </style>
  </head>
  <body>
    <h1> 
      Example of the list-style-type property 
    </h1>
    <ul class="text">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>London</li>
    </ul>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété list-style-type avec des listes ordonnées :

Exemple de la propriété CSS list-style-type avec les valeurs circle, square, upper-roman, lower-alpha, armenian, decimal, cjk-ideographic, georgian, upper-alpha et autres

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul.a {
        list-style-type: circle;
      }
      ul.b {
        list-style-type: square;
      }
      ol.c {
        list-style-type: upper-roman;
      }
      ol.d {
        list-style-type: lower-alpha;
      }
      ol.e {
        list-style-type: armenian;
      }
      ol.f {
        list-style-type: decimal;
      }
      ol.g {
        list-style-type: cjk-ideographic;
      }
      ol.h {
        list-style-type: decimal-leading-zero;
      }
      ol.i {
        list-style-type: georgian;
      }
      ol.j {
        list-style-type: hebrew;
      }
      ol.k {
        list-style-type: hiragana;
      }
      ol.l {
        list-style-type: hiragana-iroha;
      }
      ol.m {
        list-style-type: katakana;
      }
      ol.n {
        list-style-type: katakana-iroha;
      }
      ol.o {
        list-style-type: lower-greek;
      }
      ol.p {
        list-style-type: lower-latin;
      }
      ol.q {
        list-style-type: lower-roman;
      }
      ol.r {
        list-style-type: none;
      }
      ol.s {
        list-style-type: upper-alpha;
      }
      ol.t {
        list-style-type: upper-latin;
      }
    </style>
  </head>
  <body>
    <h2>List-style-type property example</h2>
    <p>Examples of unordered lists:</p>
    <h3>Circle</h3>
    <ul class="a">
      <li>New York</li>
      <li>Las Vegas</li>
      <li>Washington</li>
    </ul>
    <h3>Square</h3>
    <ul class="b">
      <li>San Francisco</li>
      <li>Los Angeles</li>
      <li>Miami</li>
    </ul>
    <p>Examples of ordered lists:</p>
    <h3>Upper-roman</h3>
    <ol class="c">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>London</li>
    </ol>
    <h3>Lower-alpha</h3>
    <ol class="d">
      <li>Dubai</li>
      <li>Anu Dhabi</li>
      <li>Qatar</li>
    </ol>
    <h3>Armenian</h3>
    <ol class="e">
      <li>Yerevan</li>
      <li>Paris</li>
      <li>Rome</li>
    </ol>
    <h3>Decimal</h3>
    <ol class="f">
      <li>Sydney</li>
      <li>Honk Kong</li>
      <li>Moscow</li>
    </ol>
    <h3>Cjk-ideographic</h3>
    <ol class="g">
      <li>Kiev</li>
      <li>Saint-Petersburg</li>
      <li>Tula</li>
    </ol>
    <h3>Decimal-leading-zero</h3>
    <ol class="h">
      <li>Bangkok</li>
      <li>Gyumri</li>
      <li>Valencia</li>
    </ol>
    <h3>Georgian</h3>
    <ol class="i">
      <li>Madrid</li>
      <li>Barcelona</li>
      <li>Prague</li>
    </ol>
    <h3>Hebrew</h3>
    <ol class="j">
      <li>Jerusalem</li>
      <li>Toronto</li>
      <li>Prague</li>
    </ol>
    <h3>Hiragana</h3>
    <ol class="k">
      <li>Cairo</li>
      <li>Tokyo</li>
      <li>Athens</li>
    </ol>
    <h3>Hiragana-iroha</h3>
    <ol class="l">
      <li>Tehran</li>
      <li>Tavriz</li>
      <li>Tel Aviv</li>
    </ol>
    <h3>Katakana</h3>
    <ol class="m">
      <li>Munich</li>
      <li>Berlin</li>
      <li>Bavaria</li>
    </ol>
    <h3>Katakana-iroha</h3>
    <ol class="n">
      <li>Brussels</li>
      <li>Istanbul</li>
      <li>Sydney</li>
    </ol>
    <h3>Lower-greek</h3>
    <ol class="o">
      <li>Seville</li>
      <li>Granada</li>
      <li>Venice</li>
    </ol>
    <h3>Lower-latin</h3>
    <ol class="p">
      <li>Budapest</li>
      <li>Vienna</li>
      <li>Amsterdam</li>
    </ol>
    <h3>Lower-roman</h3>
    <ol class="q">
      <li>Buenos Aires</li>
      <li>Rio de Janeiro</li>
      <li>San Paolo</li>
    </ol>
    <h3>None</h3>
    <ol class="r">
      <li>Vilnius</li>
      <li>Tallin</li>
      <li>Riga</li>
    </ol>
    <h3>Upper-alpha</h3>
    <ol class="s">
      <li>Montreal</li>
      <li>Melbourne</li>
      <li>Edinburgh</li>
    </ol>
    <h3>Upper-latin</h3>
    <ol class="t">
      <li>Dublin</li>
      <li>Mexico</li>
      <li>Florence</li>
    </ol>
  </body>
</html>

Essayez vous-même »

Points importants à retenir

La couleur du marqueur suit la couleur du texte. Il n'existe pas de propriété distincte pour la couleur de la puce ; définissez la color du <li> (ou de son parent) et le marqueur changera avec elle. Pour colorer le marqueur indépendamment, utilisez le pseudo-élément ::marker.
list-style-image prend le dessus sur list-style-type. Si une liste possède également un list-style-image, l'image est affichée et le type ne sert que de solution de repli si l'image ne se charge pas.
Supprimer le marqueur ne supprime pas le retrait. list-style-type: none masque la puce, mais la liste conserve le rembourrage gauche par défaut du navigateur. Ajoutez padding-left: 0 (et souvent margin: 0) pour aplatir complètement une liste — une étape courante lors de la création de menus de navigation.
Utilisez le bon élément de liste pour les valeurs ordonnées. Les valeurs de numérotation et alphabétiques s'affichent aussi sur les <ul>, mais pour l'accessibilité et la sémantique, le contenu classé ou séquentiel appartient à un <ol>.

Valeurs

Valeur	Description	Essayez
disc	Crée un marqueur sous forme de cercle plein. C'est la valeur par défaut de cette propriété.	Essayez »
armenian	Crée un marqueur avec la numérotation arménienne traditionnelle.	Essayez »
circle	Crée un marqueur sous forme de cercle.	Essayez »
cjk-ideographic	Crée un marqueur avec des chiffres idéographiques simples.	Essayez »
decimal	Crée un marqueur sous forme de nombre.	Essayez »
decimal-leading-zero	Crée un marqueur sous forme de nombre avec zéro initial, par exemple 01, 02, 05...	Essayez »
georgian	Crée un marqueur avec la numérotation géorgienne traditionnelle.	Essayez »
hebrew	Crée un marqueur avec la numérotation hébraïque traditionnelle.	Essayez »
hiragana	Crée un marqueur avec la numérotation hiragana traditionnelle.	Essayez »
hiragana-iroha	Crée un marqueur avec la numérotation hiragana iroha traditionnelle.	Essayez »
katakana	Crée un marqueur avec la numérotation katakana traditionnelle.	Essayez »
katakana-iroha	Crée un marqueur avec la numérotation katakana iroha traditionnelle.	Essayez »
lower-alpha	Crée un marqueur en lettres minuscules telles que a, b, c, d...	Essayez »
lower-greek	Crée un marqueur en lettres grecques minuscules.	Essayez »
lower-latin	Crée un marqueur en lettres latines minuscules telles que a, b, c, d...	Essayez »
lower-roman	Crée un marqueur en chiffres romains minuscules tels que i, ii, iii, iv...	Essayez »
none	Indique que le marqueur ne sera pas affiché.	Essayez »
square	Crée un marqueur sous forme de carré.	Essayez »
upper-alpha	Crée un marqueur en lettres majuscules telles que A, B, C, D...	Essayez »
upper-latin	Crée un marqueur en lettres latines majuscules telles que A, B, C, D...	Essayez »
upper-roman	Crée un marqueur en chiffres romains majuscules tels que I, II, III, IV, V...	Essayez »
initial	Applique la valeur par défaut de la propriété.	Essayez »
inherit	Hérite de la propriété depuis son élément parent.

Pratique

Que spécifie la propriété list-style-type en CSS ?

Le marqueur utilisé dans une liste.La couleur de l'élément de liste.Le style des puces ou de la numérotation utilisés dans une liste.La taille du texte dans une liste.