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é

Safari ne reconnait pas (incorrectement) les listes non ordonnées lorsque list-style:none leur est appliqué et ne les ajoute pas dans l'arbre d'accessibilité (utilisé par les lecteurs d'écrans). 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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 7Safari Support complet 1WebView Android Support complet 1Chrome Android Support complet OuiEdge Mobile Support complet 12Firefox Android Support complet 4Opera Android Support complet 6Safari iOS Support complet 1Samsung Internet Android Support complet Oui
symbols
Expérimentale
Chrome Aucun support NonEdge ? Firefox Support complet 35IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile ? Firefox Android Support complet 35Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.

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,