Lists

list-style

Value	[`list-style-type` \|\| `list-style-position` \|\| `list-style-image`] \| `inherit`
Used with	list item elements
Inherited	yes
Example	`UL { list-style: decimal inside }`

This allows you to set 'list-style-type', 'list-style-image', and 'list-style-position' at once.

list-style-type

Value	`countingsystem` \| `disc` \| `circle` \| `square` \| `none` \| `inherit`
Initial	disc
Used with	display-item elements
Inherited	yes

This property specifies the appearance of the marker used for list items. Note that unrecognised counting systems will be displayed as decimal, and the alphabetical systems are undefined beyond their end point (i.e. "Z" or its equivalent) .

countingsystem is one of

decimal1, 2, 3, ...
decimal-leading-zero inserts extra zeros : 01, 02, 03, ..., 98, 99.
lower-roman, upper-roman : roman numerals.
hebrew, georgian, armenian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha
lower-latin or lower-alpha : a, b, c, ...
upper-latin or upper-alpha : A, B, C, ...
lower-greek

Specifies what type of marker character is used in lists.

  OL { list-style-type: decimal }       /* 1 2 3 4 5 etc. */
  OL { list-style-type: lower-alpha }   /* a b c d e etc. */
  OL { list-style-type: lower-roman }   /* i ii iii iv v etc. */

list-style-image

Value	`address` `none` \| `inherit`
Initial	none
Used with	list item elements
Inherited	yes

Specifies an image that will be used as the marker in lists.

list-style-position

Value	`inside` \| `outside` \| `inherit`
Initial	outside
Used with	list item elements
Inherited	yes

This property determines whether the list markers are displayed outside the block of text, or inside with the text immediately following.

marker-offset

Value	`length` [`auto`] \| `inherit`
Initial	auto
Used with	all elements
Inherited	no
Example	`UL { counter-increment: listitem 1 }`

This property sets the distance between list marker and the text in the list. Lengths may be negative if they are displayable.

Counters

counter-reset

Value	[`countername` [`integer`]] \| `none`\| `inherit`
Used with	all elements
Inherited	no
Example	`UL { counter-reset: listitem 1 }`

This property lists the names of counters, which you desginate yourself, along with its optional integer value. The counter is reset to this value each time the element, which this property is assigned to, occurs. The default is 0.

counter-increment

Value	[`countername` [`integer`]] \| `none`\| `inherit`
Used with	all elements
Inherited	no
Example	`UL { counter-increment: listitem 1 }`

This lists any number of counters, along with an optional integer which specifies how much to advance the counter by, each time the element which this property is assigned to occurs. The default increment is 1, and non-positive values can be used. If the counter is also used by the element, it is incremented first. The counter is incremented after any reset operation occurs on it.

To specify multiple counters for an element, you MUST list them together, otherwise the latter definition will over-rule the earlier one.

Nesting

Counters will be nested if redefined within a block where they are already used. For example, if a counter is used on an <UL> list, and a second list is created within a first list, then the second list will have a counter of its own, independant of the first. References to the counter will automatically refer to the appropriate instance of the counter.

Appearance of counters

The default display is decimal, but you can use counter(countername, list-style-type) to specify alternatives, which are defined in the description of the list-style-type property.

Any element that has the display element set to none is unable to use counters.

Displaying Counters

Counters are displayed with the content property of the :before and :after pseudo-elements.

counter(countername, [style]). The optional style attribute is normally decimal, but can be anything defined for the list-style-type property.
counter(countername, string, style) displays all the counters of the given countername, spereated by the given string.

Site Map

(C)opyright, Geoff Knagge.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.