List-style-type - Property CSS

Syntax diagram for list-style-type.

Details concerning the diagram above:

• bullet is a predefined bullet: circle, square, etc.
• numbering is a predefined numbering: decimal, alphabetic, etc.
• string is a short text specified in quotation marks or apostrophes. It will be used in place of the marker.
• id is the name of a custom numbering defined with @counter-style .

Description of the list-style-type property.

list-style-type defines the type of bullets or numbering to be used for lists ( Li tags ).

Browser style sheets define default bullets for the first 3 levels of nesting, which are in general:
A circular black chip for the first level.
A circular white chip for the second level.
And a black square for the third level and the following.

Note: list-style-type has no effect if an image has been set by list-style-image, or if the content is applied to the ::marker pseudo-element with the value none.

See also the page on the @counter-style directive which allows you to define a custom numbering.
And also check out shorthand property list-style .

Values for list-style-type property.

Les puces.

• list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: none;

  Several types of bullets are predefined by CSS:

  • One
  • Two
  • Three

  list-style-type:disc
  Black circular bullets

  • Un
  • Deux
  • Trois

  list-style-type:circle
  White circular bullets/div>

  • Un
  • Deux
  • Trois

  list-style-type:square
  Black square bullets

  • Un
  • Deux
  • Trois

  list-style-type:none
  No bullets

Values for a latin Language Numbering.

All numbering is based on an internal counter called list-item, which is managed automatically. But it is nevertheless possible to act on its configuration with the counter-increment , counter-set, and counter-reset properties.

• list-style-type: decimal; list-style-type: decimal-leading-zero;

  Decimal numbering (classic), in numbers.

  The decimal-leading-zero value always displays two digits, with numbers from 1 to 9 preceded by a zero.

  Decimal numbering starts with the second symbol (knowing that the first symbol is zero), and continues until the last symbol (the 9). Then we start again with two numbers, this time including the first symbol: the zero.

  • One
  • Two
  • Three

  list-style-type:decimal
  Classic decimal numbering

  • One
  • Two
  • Three

  list-style-type:decimal-leading-zero
  Decimal numbering with systematically two digits
• list-style-type: lower-roman; list-style-type: upper-roman;

  Numbering in lowercase or uppercase Roman numerals.
  This type of numbering uses letters, with the following values:

  I : 1

  V : 5

  X : 10

  L : 50

  C : 100

  D : 500

  M : 1000

  When a symbol is followed by another symbol of equal or lesser value, the values of the two symbols are added. Otherwise, the value of the first symbol is subtracted from that of the following symbol.
  Roman numbering does not allow the number zero to be represented.

  • One
  • Two
  • Three
  • Four

  list-style-type:lower-roman

  • One
  • Two
  • Three
  • Four

  list-style-type:upper-roman
• list-style-type: lower-alpha; list-style-type: lower-latin; list-style-type: upper-alpha; list-style-type: upper-latin;

  Alpha alpha latin numbering are synonymous. These are alphabetical numbering in Latin, lowercase or uppercase characters.

  Alphabetical numbering begins with the first symbol (the a), continues to the last symbol (the z), then resumes with two letters, starting again at the first symbol.

  • One
  • Two
  • Three

  list-style-type:lower-alpha

  • One
  • Two
  • Three

  list-style-type:lower-latin

  • One
  • Two
  • Three

  list-style-type:upper-alpha

  • One
  • Two
  • Three

  list-style-type:upper-latin

Values for a non-latin language numbering.

• list-style-type: armenian; list-style-type: cjk-decimal; list-style-type: georgian; list-style-type: tibetan; Etc.

  Numbering in national characters. Many languages are recognized: Armenian, cjk-ideographic, Georgian, etc. Refer to the simulator at the bottom of this page for a more complete list and to test your browser's compatibility.

  • One
  • Two
  • Three

  list-style-type:armenian

  • One
  • Two
  • Three

  list-style-type:cjk-decimal

  • One
  • Two
  • Three

  list-style-type:georgian

  • One
  • Two
  • Three

  list-style-type:tibetan

list-style-type Values - Custom Numbering.

• list-style-type: '> ';

  The specified string is used as the bullet. It must be indicated in apostrophes or quotation marks.

  • One
  • Two
  • Three
  list-style-type:'> '
• list-style-type: symbols(alphabetic '⓵' '⓶' '⓷'); ⚠

  The symbols() function allows you to define the type of numbering and the characters to be used for numbering. See the description of the symbols() function.

  ⚠ Some browsers like Chrome don't handle this syntax. Instead, use custom numbering with @counter-style (see below).

  • One
  • Two
  • Three
  list-style-type:symbols(alphabetic '⓵' '⓶' '⓷')
  • One
  • Two
  • Three
  list-style-type:symbols(alphabetic '➊' '➋' '➌' '➍' '➎')
• list-style-type: cards;

  Here cards is the name of a custom numbering defined by @counter-style . With the @counter-style directive, everything is configurable: the type of numbering, the symbols to be used, a possible prefix and suffix, etc.

  The numbering name should not be specified in quotation marks or single quotes.

  Here we have chosen a classic numerical numbering, but the numbers from 1 to 9 have been replaced by playing cards. Since numeric numbering requires a value of 0, the back of the card will be considered as a null value.

  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  list-style-type:cards

Global values
(common to all properties):

Animation of the list-style-type property.

Animation of list-style-type is possible. Here's a small example: the animation is applied to each of the li elements with a delay at the beginning that is even more important that the item is located near the end of the list. This is what causes this downward sliding effect.

• One
• Two
• Three
• Four
• Five

Manipulating the list-style-type property programmatically.

Set the value of list-style-type with Javascript.

In Javascript, here's how to change the value of list-style-type. We can see that Javascript offers a syntax with the typical notation of CSS, in kebab-case (a hyphen to separate words), and another syntax with camel-case notation (a capital letter to separate words) more common in Javascript.

let el = document.getElementById('id'); el.style['list-style-type'] = 'decimal'; // or let el = document.getElementById('id'); el.style.listStyleType = 'decimal';

Read in Javascript the value of list-style-type.

For this code to work, the property must have been assigned in the HTML code directly to the element itself via its style attribute, and not by going through a CSS selector.

let el = document.getElementById('id'); let value = el.style['list-style-type']; // or let el = document.getElementById('id'); let value = el.style.listStyleType;

Read the computed value of list-style-type in Javascript.

The calculated value is the result of the valuation of the inheritance cascade and the priority rules. Otherwise, this will be the initial value of the property.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('list-style-type');

Set the value of the list-style-type property with JQuery.


$('#id').css('list-style-type', 'decimal');
// or
$('#id').css('listStyleType', 'decimal');


Read the computed value of list-style-type in JQuery.

let value = $('#id').css('list-style-type');

Test for yourself.

The buttons below apply the entered value to the list-style-type property and then display either the value as applied, or the computed value. In the case of list-style-type this will not make a difference because the property only accepts predefined values.

Simulator.

Select a bullet or numbering type for list-style-type and see the change in the color list below. Values that are not supported by your current browser are displayed in red.

As an example, we have added two custom numberings:

• cards: a classic numerical numbering with the numbers replaced by playing cards, the back showing the value 0.
• dices: alphabetical numbering using dice to be played to represent values. No zero value with dice, so we opted for alphabetical numbering.

Browser compatibility.

The list-style-type property is well recognized by current browsers. However, among the multitude of numberings in non-Latin languages, there remains non-compatibilities.
The symbols() function also causes problems on many browsers.

1

list-style-type
property

2

symbols()
function

Estimated overall support.

96%

3%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Chrome

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

list-style-type property historic.

• Cascading Style Sheets specification - Version 1

  Initial definition of the list-style-type property, accepting the values disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha and none.
  

  November 17, 1995

  Working Draft.

  

  November 12, 1996

  Proposed for recommendation.

  

  December 17, 1996

  Recommendation .

  

  September 13, 2018

  Old specification, declared obsolete.

• Cascading Style Sheets Level 2 - Revision 1 Specification

  Adding new numbering formats for the list-style-type property: decimal-leading-zero, upper-latin, armenian, georgian, lower-greek, lower-latin and inherit.
  

  November 04, 1997

  Working Draft.

  

  March 24, 1998

  Proposed for recommendation.

  

  May 11, 1998

  Recommendation .

• CSS Lists and Counters Module Level 3

  Adding numbering formats in many languages (described in a separate module).
  Ability to specify a character string as a marker.
  

  February 20, 2002

  Working Draft.

  

  

  

• CSS Counter Styles Level 3

  Detailed description of counter styles and international numbering.
  

  October 09, 2012

  Working Draft.

  

  February 03, 2015

  Candidate Recommendation.

  

  

See also, on lists and numbering.

The lists and numbering are described in this module: CSS Lists and Counters Module. The list-style-type property is part of this module along with the following definitions:

Properties:

counter-increment

Sets the increment step for a counter.

counter-reset

Initializes a counter.

counter-set

Changes the value of one or more counters.

list-style

Summary of the characteristics of bulleted or numbered lists.

list-style-image

Defines a custom image to be used in place of bullets, in the context of a list enumeration.

list-style-position

Defines the location of list markers (bullets or numbers).

⚠

marker-side

Defines the side where the list marker is positioned (depending on the language).

Functions:

counter()

Returns the current value of a counter. The latter is handled by the counter-reset, counter-set, and counter-increment properties.

counters()

Returns the value of a hierarchical counter.