list-style-type

The list-style-type CSS property specifies the marker string, which is used to fill the list item's marker when its content value is normal and there is no marker image.

list-style-type: value;

object.style.listStyleType = "value";

<'list-style-type'> = <counter-style> | <string> | none

<counter-style> = <counter-style-name> | <symbols()>

<counter-style-name>

A <custom-ident> that is not an ASCII case-insensitive match for "none".

<symbols()> = symbols( <symbols-type>? [ <string> | <image> ]+ )

<symbols-type> = cyclic | numeric | alphabetic | symbolic | fixed

cyclic

Cycles repeatedly through its provided symbols, looping back to the beginning when it reaches the end of the list.

numeric

Interprets the list of counter symbols as digits to a place-value numbering system.

decimal

Western decimal numbers (1, 2, 3, ..., 98, 99, 100).

decimal-leading-zero

Decimal numbers padded by initial zeros (01, 02, 03, ..., 98, 99, 100).

arabic-indic

Arabic-indic numbering (١‎, ٢‎, ٣‎, ٤‎, ..., ٩٨‎, ٩٩‎, ١٠٠‎).

armenian

upper-armenian

Traditional uppercase Armenian numbering (Ա, Բ, Գ, ..., ՂԸ, ՂԹ, Ճ).

lower-armenian

Lowercase Armenian numbering (ա, բ, գ, ..., ղը, ղթ, ճ).

bengali

Bengali numbering (১, ২, ৩, ..., ৯৮, ৯৯, ১০০).

cambodian

khmer

Cambodian/Khmer numbering (១, ២, ៣, ..., ៩៨, ៩៩, ១០០).

cjk-decimal

Han decimal numbers (一, 二, 三, ..., 九八, 九九, 一〇〇).

devanagari

devanagari numbering (१, २, ३, ..., ९८, ९९, १००).

georgian

Traditional Georgian numbering (ა, ბ, გ, ..., ჟჱ, ჟთ, რ).

gujarati

Gujarati numbering (૧, ૨, ૩, ..., ૯૮, ૯૯, ૧૦૦).

gurmukhi

Gurmukhi numbering (੧, ੨, ੩, ..., ੯੮, ੯੯, ੧੦੦).

hebrew

Traditional Hebrew numbering (א‎, ב‎, ג‎, ..., צח‎, צט‎, ק‎).

kannada

Kannada numbering (೧, ೨, ೩, ..., ೯೮, ೯೯, ೧೦೦).

lao

Laotian numbering (໑, ໒, ໓, ..., ໙໘, ໙໙, ໑໐໐).

malayalam

Malayalam numbering (൧, ൨, ൩, ..., ൯൮, ൯൯, ൧൦൦).

mongolian

Mongolian numbering (᠑, ᠒, ᠓, ..., ᠙᠘, ᠙᠙, ᠑᠐᠐).

myanmar

Myanmar (Burmese) numbering (၁, ၂, ၃, ..., ၉၈, ၉၉, ၁၀၀).

oriya

Oriya numbering (୧, ୨, ୩, ..., ୯୮, ୯୯, ୧୦୦).

persian

Persian numbering (۱, ۲, ۳, ۴, ..., ۹۸, ۹۹, ۱۰۰).

lower-roman

Lowercase ASCII Roman numerals (i, ii, iii, ..., xcviii, xcix, c).

upper-roman

Uppercase ASCII Roman numerals (I, II, III, ..., XCVIII, XCIX, C).

tamil

Tamil numbering (௧, ௨, ௩, ..., ௯௮, ௯௯, ௧௦௦).

telugu

Telugu numbering (౧, ౨, ౩, ..., ౯౮, ౯౯, ౧౦౦).

thai

Thai (Siamese) numbering (๑, ๒, ๓, ..., ๙๘, ๙๙, ๑๐๐).

tibetan

Tibetan numbering (༡, ༢, ༣, ..., ༩༨, ༩༩, ༡༠༠).

alphabetic

Interprets the list of counter symbols as digits to an alphabetic numbering system.

lower-alpha

lower-latin

Lowercase ASCII letters (a, b, c, ..., z, aa, ab).

upper-alpha

upper-latin

Uppercase ASCII letters (A, B, C, ..., Z, AA, AB).

lower-greek

Lowercase classical Greek (α, β, γ, ..., ω, αα, αβ).

hiragana

Dictionary-order hiragana lettering (あ, い, う, ..., ん, ああ, あい).

hiragana-iroha

Iroha-order hiragana lettering (い, ろ, は, ..., す, いい, いろ).

katakana

Dictionary-order katakana lettering (ア, イ, ウ, ..., ン, アア, アイ).

katakana-iroha

Iroha-order katakana lettering (イ, ロ, ハ, ..., ス, イイ, イロ).

symbolic

Cycles repeatedly through its provided symbols, doubling, tripling, etc. the symbols on each successive pass through the list.

disc

A filled circle, similar to • U+2022 BULLET.

circle

A hollow circle, similar to ◦ U+25E6 WHITE BULLET.

square

A filled square, similar to ◾ U+25FE BLACK MEDIUM SMALL SQUARE.

disclosure-open

Symbol appropriate for indicating an open disclosure widget.

disclosure-closed

Symbol appropriate for indicating a closed disclosure widget.

fixed

Runs through its list of counter symbols once, then falls back.

cjk-earthly-branch

Han "Earthly Branch" ordinals (子, 丑, 寅, ..., 亥).

cjk-heavenly-stem

Han "Heavenly Stem" ordinals (甲, 乙, 丙, ..., 癸).

<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

<image> = <url> | <gradient>

<url> = url( <string> <url-modifier>* )

<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

<url-modifier>

Changes the meaning or the interpretation of the URL.

<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>

<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )

<angle>

deg

Degrees. There are 360 degrees in a full circle.

grad

Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

rad

Radians. There are 2p radians in a full circle.

turn

Turns. There is 1 turn in a full circle.

<side-or-corner> = [left | right] || [top | bottom]

left

Left.

right

Right.

top

Top.

bottom

Bottom.

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

<linear-color-stop> = <color> && <length-percentage>?

<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> = [ <length> | <percentage> ]

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>

<length-percentage> = [ <length> | <percentage> ]

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<repeating-linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )

<angle>

deg

Degrees. There are 360 degrees in a full circle.

grad

Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

rad

Radians. There are 2p radians in a full circle.

turn

Turns. There is 1 turn in a full circle.

<side-or-corner> = [left | right] || [top | bottom]

left

Left.

right

Right.

top

Top.

bottom

Bottom.

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

<linear-color-stop> = <color> && <length-percentage>?

<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> = [ <length> | <percentage> ]

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>

<length-percentage> = [ <length> | <percentage> ]

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )

<ending-shape>

Determines whether the gradient's ending shape is a circle or an ellipse.

<size>

Determines the size of the gradient's ending shape.

<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]

left

Left.

center

Center.

right

Right.

top

Top.

bottom

Bottom.

<length-percentage> = [ <length> | <percentage> ]

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

<linear-color-stop> = <color> && <length-percentage>?

<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> = [ <length> | <percentage> ]

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>

<length-percentage> = [ <length> | <percentage> ]

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<repeating-radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )

<ending-shape>

Determines whether the gradient's ending shape is a circle or an ellipse.

<size>

Determines the size of the gradient's ending shape.

<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]

left

Left.

center

Center.

right

Right.

top

Top.

bottom

Bottom.

<length-percentage> = [ <length> | <percentage> ]

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#

<linear-color-stop> = <color> && <length-percentage>?

<color>

Specifies the color using a keyword or a numerical specification.

<length-percentage> = [ <length> | <percentage> ]

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<linear-color-hint> = <length-percentage>

<length-percentage> = [ <length> | <percentage> ]

<length>

Specifies the length using a number followed by a unit of measurement.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

none

The element has no marker string.

disc

list-style

list-style-image

list-style-position

World Wide Web Consortium (W3C)