list-style

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriété raccourcie CSS list-style permet de définir toutes les propriétés de style de liste en une seule fois.

Exemple interactif

list-style: square;

list-style: inside;

list-style: url("/shared-assets/images/examples/rocket.svg");

list-style: none;

list-style: georgian inside url("/shared-assets/images/examples/rocket.svg");

list-style: georgian outside url("/non-existent.svg");

<section class="default-example" id="default-example">
  <div>
    <p>NASA Notable Missions</p>
    <ul class="transition-all" id="example-element">
      <li>Apollo</li>
      <li>Hubble</li>
      <li>Chandra</li>
      <li>Cassini-Huygens</li>
      <li>Spitzer</li>
    </ul>
  </div>
</section>

.default-example {
  font-size: 1.2rem;
}

#example-element {
  width: 100%;
  background: #be094b;
  color: white;
}

section {
  text-align: left;
  flex-direction: column;
}

hr {
  width: 50%;
  color: lightgray;
  margin: 0.5em;
}

.note {
  font-size: 0.8rem;
}

.note a {
  color: #009e5f;
}

@counter-style space-counter {
  symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D";
  suffix: " ";
}

Les valeurs de cette propriété sont appliquées aux éléments de liste, y compris les éléments HTML <li> et les éléments avec display: list-item;. Parce que cette propriété est héritée, elle peut être définie sur un élément parent (normalement <ol> ou <ul>) pour que la même mise en forme de liste s'applique à tous les éléments imbriqués.

Propriétés constitutives

Cette propriété est une propriété raccourcie pour les propriétés CSS :

Syntaxe

css

/* Type */
list-style: square;

/* Image */
list-style: url("../img/etoile.png");

/* Position */
list-style: inside;

/* Deux valeurs */
list-style: georgian inside;

/* Trois valeurs */
list-style: lower-roman url("../img/etoile.png") outside;

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

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

La propriété list-style est définie avec une, deux ou trois valeurs dans n'importe quel ordre. Si list-style-type et list-style-image sont toutes les deux définies, la propriété list-style-type est utilisée comme solution de repli si l'image n'est pas disponible.

Valeurs

list-style-type: Un style de compteur (<counter-style>), une chaîne de caractères (<string>), ou none. Si omise dans la propriété raccourcie, la valeur par défaut disc est utilisée. Voir list-style-type.
list-style-image: Une <image> ou none. Si omise, la valeur par défaut none est utilisée. Voir list-style-image.
list-style-position: inside ou outside. Si omise, la valeur par défaut outside est utilisée. Voir list-style-position.
none: Aucun style n'est utilisé.

Définition formelle

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `list-style-type`: `disc` `list-style-position`: `outside` `list-style-image`: `none`
Applicabilité	éléments de liste
Héritée	oui
Valeur calculée	pour chaque propriété individuelle de la propriété raccourcie : `list-style-image`: The keyword `none` or the computed <image> `list-style-position`: comme spécifié `list-style-type`: comme spécifié
Type d'animation	pour chaque propriété individuelle de la propriété raccourcie : `list-style-image`: discrète `list-style-position`: discrète `list-style-type`: discrète

Syntaxe formelle

list-style = 
  <'list-style-position'>  ||
  <'list-style-image'>     ||
  <'list-style-type'>      

<list-style-position> = 
  inside   |
  outside  

<list-style-image> = 
  <image>  |
  none     

<list-style-type> = 
  <counter-style>  |
  <string>         |
  none             

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

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

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<counter-style-name> = 
  <custom-ident>  

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed

Accessibilité

Safari ne reconnait pas les listes ordonnées ou non ordonnées comme des listes dans l'arbre d'accessibilité si elles ont une valeur list-style de none, sauf si la liste est imbriquée dans l'élément de navigation <nav>. Ce comportement est intentionnel ^(angl.) et n'est pas considéré comme un bug.

Pour que les listes soient annoncées comme des listes, ajoutez role="list" aux éléments <ol> et <ul>, surtout si la liste n'est pas imbriquée dans un <nav>. Cela restaure la sémantique de liste sans affecter le design :

html

<ul role="list">
  <li>Un élément</li>
  <li>Un autre élément</li>
</ul>

Si l'attribut ARIA role n'est pas une option pour votre code, il est possible d'utiliser le CSS. Ajouter un pseudo-contenu qui n'est pas vide, comme du texte ou des images avant chaque élément de liste, peut restaurer la sémantique de liste, mais cela impacte l'apparence visuelle. Safari détermine si le pseudo-contenu ajouté est suffisant comme contenu accessible, et restaure la sémantique de liste si c'est le cas. En général, Safari considère le texte et les images comme suffisants, c'est pourquoi le content: "+ "; montré ci-dessous fonctionne (mais nécessite un style supplémentaire pour ne pas affecter le design).

css

ul {
  list-style: none;
}

ul li::before {
  content: "+ ";
}

Une déclaration de content: ""; (une chaîne vide) est ignorée, tout comme les valeurs de content qui ne contiennent que des espaces, telles que content: " ";.

Ces solutions CSS ne doivent être utilisées que lorsque la solution HTML n'est pas disponible, et uniquement après avoir vérifié qu'elles ne produisent pas de comportements inattendus pouvant nuire à l'expérience utilisateur.

Exemples

Définir le type et la position du style de liste

HTML

html

Liste 1
<ul class="un">
  <li>Élément 1</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
</ul>
Liste 2
<ul class="deux">
  <li>Élément A</li>
  <li>Élément B</li>
  <li>Élément C</li>
</ul>

CSS

css

.un {
  list-style: circle;
}

.deux {
  list-style: square inside;
}

Résultat

Spécifications

Specification
CSS Lists and Counters Module Level 3 # list-style-property

Compatibilité des navigateurs

Voir aussi

Les propriétés de composant : list-style-type, list-style-image et list-style-position
Le pseudo-élément ::marker
Le module des listes et compteurs CSS
Le module des styles de compteur CSS

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 10 févr. 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content