list-style

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 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: 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
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationdiscrète

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi