Propriété CSS list-style

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: " ";
}

Propriétés constitutives

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

• list-style-image
• list-style-position
• list-style-type

Syntaxe

/* 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, par défaut est disc. Voir list-style-type.

list-style-image

Une <image> ou none. Si omise, par défaut est none. Voir list-style-image.

list-style-position

inside ou outside. Si omise, par défaut est outside. Voir list-style-position.

none

Aucun style n'est utilisé.

Description

La propriété list-style permet de personnaliser l'apparence des éléments de liste. Les valeurs de cette propriété sont appliquées aux éléments de liste, y compris les éléments <li> et les éléments avec display: list-item;.

Héritage du style de liste

Comme la propriété abrégée list-style-type est héritée, list-style peut être définie sur un élément parent (normalement <ol> ou <ul>) pour appliquer le même style de liste à ses éléments de liste. Cependant, les feuilles de style des agents utilisateurs définissent list-style-type sur les éléments <ul>, <ol> et <menu>, de sorte que les listes imbriquées utilisent ces valeurs par défaut au lieu d'hériter du list-style de la liste parente. Les valeurs list-style-position et list-style-image sont normalement héritées dans les listes imbriquées. Pour que les listes imbriquées héritent également du type de marqueur, définissez list-style ou list-style-type sur inherit pour les éléments de liste imbriqués.

Par exemple, dans des cas comme celui-ci :

<ul>
  <li>Un</li>
  <li>Deux</li>
  <li>
    Trois
    <ul>
      <li>Quatre</li>
      <li>Cinq</li>
      <li>Six</li>
    </ul>
  </li>
</ul>

Lorsque qu'un style personnalisé est défini sur la liste externe :

body > ul {
  list-style: square;
}

La liste interne n'hérite pas du style personnalisé à moins que vous ne la définissiez sur inherit :

ul ul {
  list-style: inherit;
}

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 bogue.

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 :

<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).

ul {
  list-style: none;
}

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

Une déclaration de content: ""; (une chaîne de caractères 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.

• Corriger les listes (2023)
• VoiceOver et list-style-type: none (2017)
• Comprendre les règles WCAG : Créer du contenu pouvant être présenté de différentes manières
• Comprendre le critère de succès 1.3.1 : Informations et relations | WCAG 2.1

Définition formelle

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       

Exemples

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

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

.un {
  list-style: circle;
}

.deux {
  list-style: square inside;
}

Résultat

Spécifications

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