Notes CSS - Lists

list-style-image

/* Keyword values */ list-style-image: none; /* <url> values */ list-style-image: url("starsolid.gif"); /* valid image values */ list-style-image: linear-gradient(to left bottom, red, blue); /* Global values */ list-style-image: inherit; list-style-image: initial; list-style-image: revert; list-style-image: revert-layer; list-style-image: unset;

list-style-position

/* Keyword values */ list-style-position: inside; list-style-position: outside; /* Global values */ list-style-position: inherit; list-style-position: initial; list-style-position: revert; list-style-position: revert-layer; list-style-position: unset;

list-style-type

/* Partial list of types */ list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: decimal; list-style-type: georgian; list-style-type: trad-chinese-informal; list-style-type: kannada; /* <string> value */ list-style-type: "-"; /* Identifier matching an @counter-style rule */ list-style-type: custom-counter-style; /* Keyword value */ list-style-type: none; /* Global values */ list-style-type: inherit; list-style-type: initial; list-style-type: revert; list-style-type: revert-layer; list-style-type: unset;

list-style

The list-style CSS shorthand property allows you to set all the list style properties at once.

/* type */ list-style: square; /* image */ list-style: url("../img/shape.png"); /* position */ list-style: inside; /* two values */ list-style: georgian outside; list-style: url("img/pip.svg") inside; /* three values */ list-style: lower-roman url("img/shape.png") outside; /* Keyword value */ list-style: none; /* Global values */ list-style: inherit; list-style: initial; list-style: revert; list-style: revert-layer; list-style: unset;

@counter-style

@counter-style thumbs { system: cyclic; symbols: "\1F44D"; suffix: " "; } ul { list-style: thumbs; }

system

Specifies the algorithm to be used for converting the integer value of a counter to a string representation. If the value is cyclic, numeric, alphabetic, symbolic, or fixed, the symbols descriptor must also be specified. If the value is additive, the additive-symbols descriptor must also be specified.

symbols

Specifies the symbols that are to be used for the marker representations. Symbols can contain strings, images, or custom identifiers. This descriptor is required if the system descriptor is set to cyclic, numeric, alphabetic, symbolic, or fixed.

additive-symbols

Defines the additive tuples for additive systems. While the symbols specified in the symbols descriptor are used for constructing marker representation by most algorithms, additive counter systems, such as Roman numerals, consist of a series of weighted symbols. The descriptors is a list of counter symbol along with their non-negative integer weights, listed by weight in descending order. This descriptor is required if the system descriptor is set to additive.

negative

Specifies to symbols to be appended or prepended to the counter representation if the value is negative.

prefix

Specifies a symbol that should be prepended to the marker representation. Prefixes are added to the representation in the final stage, before any characters added to negative counter values by the negative descriptor.

suffix

Specifies, similar to the prefix descriptor, a symbol that is appended to the marker representation. Suffixes come after the marker representation, including after any characters added to negative counter values by the negative descriptor.

range

Defines the range of values over which the counter style is applicable. If a counter style is used to represent a counter value outside of the ranges defined by this descriptor, the counter style will drop back to its fallback style.

pad

Is used when you need the marker representations to be of a minimum length. For example if you want the counters to start at 01 and go through 02, 03, 04, etc., then the pad descriptor is to be used. For representations larger than the specified pad value, the marker is constructed as normal.

speak-as

Describes how speech synthesizers, such as screen readers, should announce the counter style. For example, the value of the list item marker can be read out as numbers or alphabets for ordered lists or as audio cues for unordered lists, based on the value of this descriptor.

fallback

Specifies the counter name of the system to fall back to if either the specified system is unable to construct the representation of a counter value or if the counter value is outside the specified range. If the fallback counter also fails to represent the value, then that counter's fallback is used, if one is specified. If there are either no fallback counters described or if the chain of fallback systems are unable to represent a counter value, then it will ultimately fall back to the decimal style.

@counter-style = @counter-style <counter-style-name> { <declaration-list> }

@counter-style circled-alpha { system: fixed; symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ; suffix: " "; } .ca_items { list-style: circled-alpha; }

Item 1
Item 2
Item 3
Item 4

cyclic

Item 1
Item 2
Item 3
Item 4

numeric

Item 1
Item 2
Item 3
Item 4

alphabetic

Item 1
Item 2
Item 3
Item 4

symbolic

Item 1
Item 2
Item 3
Item 4

fixed

Item 1
Item 2
Item 3
Item 4

treble_clef

Item 1
Item 2
Item 3
Item 4

coda_symbol

Item 1
Item 2
Item 3
Item 4

circled_num1

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

circled_num2

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

right_arrow

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10