La propriété list-style est une propriété raccourcie qui permet de définir list-style-type, list-style-image et list-style-position.

Note : Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels display: list-item;}}). Par défaut, cela inclut les éléments <li>. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à <ol> ou à <ul>).

Syntaxe

/* Type */
list-style: square;

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

/* Position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/etoile.png') outside;

list-style: none;

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

Valeurs

Cette propriété raccourcie peut prendre un, deux ou trois mots-clés, dans n'importe quel ordre. Si list-style-type et list-style-image sont tous les deux définis, list-style-type sera utilisé si l'image est indisponible.

<'list-style-type'>
Voir list-style-type
<'list-style-image'>
Voir list-style-image
<'list-style-position'>
Voir list-style-position
none
Aucun style n'est utilisé.

Syntaxe formelle

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

Exemples

CSS

.un {
  list-style: circle;
}

.deux {
  list-style: square inside;
}

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>

Résultat

Accessibilité

Le lecteur d'écran VoiceOver n'annonce pas, incorrectement, les listes non ordonnées lorsque list-style:none leur est appliqué. Pour palier à 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: none;
}

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

Spécifications

Spécification État Commentaires
CSS Lists Module Level 3
La définition de 'list-style' dans cette spécification.
Version de travail Aucun changement.
CSS Level 2 (Revision 1)
La définition de 'list-style' dans cette spécification.
Recommendation Définition initiale.

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitééléments de liste
Héritéeoui
Médiavisuel
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationdiscrète
Ordre canoniquel'ordre d'apparition dans la grammaire formelle des valeurs

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1121471
symbols Non ?35 Non Non Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple1 Oui12461 Oui
symbols Non Non ?35 Non Non Non

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, Sebastianz, louuis, teoli, FredB, Mgjbot, Fredchat, Kyodev, VincentN
Dernière mise à jour par : SphinxKnight,