Menu Home

list-style-type

osbo.com | CSS | Properties | 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.

Syntax

CSS

list-style-type: value;

JS

object.style.listStyleType = "value";

Values

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

Initial

disc

Examples

alphabetic | hiragana

alphabetic | hiragana-iroha

alphabetic | katakana

alphabetic | katakana-iroha

alphabetic | lower-alpha

alphabetic | lower-greek

alphabetic | lower-latin

alphabetic | upper-alpha

alphabetic | upper-latin

counter-style-name

fixed | cjk-earthly-branch

fixed | cjk-heavenly-stem

none

numeric | arabic-indic

numeric | armenian

numeric | bengali

numeric | cambodian

numeric | cjk-decimal

numeric | decimal

numeric | decimal-leading-zero

numeric | devanagari

numeric | georgian

numeric | gujarati

numeric | gurmukhi

numeric | hebrew

numeric | kannada

numeric | khmer

numeric | lao

numeric | lower-armenian

numeric | lower-roman

numeric | malayalam

numeric | mongolian

numeric | myanmar

numeric | oriya

numeric | persian

numeric | tamil

numeric | telugu

numeric | thai

numeric | tibetan

numeric | upper-armenian

numeric | upper-roman

string

symbolic | circle

symbolic | disc

symbolic | disclosure-closed

symbolic | disclosure-open

symbolic | square

JS

Internal

list-style

list-style-image

list-style-position

External

World Wide Web Consortium (W3C)