CSS ::-moz-list-number Pseudo-Element

CSS ::-moz-list-number Pseudo-Element

The ::-moz-list-number pseudo-element is a non-standard Mozilla CSS extension historically used to style the number marker of an ordered list item in Firefox. The standardized ::marker pseudo-element is recommended for modern websites.

Syntax

li::-moz-list-number {
  color: #0066cc;
}

The selector targets the generated number marker of an ordered list item in implementations that recognize this Mozilla-specific pseudo-element.

The -moz- prefix identifies a browser-specific extension rather than a standardized CSS feature.

How It Works

HTML ordered lists use the <ol> element to display a sequence of list items. By default, the browser generates a marker such as 1., 2., or 3. before each item.

The legacy ::-moz-list-number selector was designed to target the generated number separately from the list item's text.

For example, the number could be given a different color or font size while the text retained its normal appearance.

This pseudo-element is specific to numbered markers. The related ::-moz-list-bullet pseudo-element targets bullet markers.

Numbered List Markers

Ordered list markers can use several numbering styles, including decimal numbers, letters, and Roman numerals. The list-style-type property determines which marker style is displayed.

ol {
  list-style-type: upper-roman;
}
ol li::-moz-list-number {
  color: #cc3300;
  font-weight: bold;
}

In a Firefox implementation that supports the legacy selector, the numbers can receive the additional styling. The numbering format itself comes from list-style-type.

Because this selector is non-standard, do not rely on it for consistent appearance across browsers.

Example

The following example illustrates how the legacy selector was intended to style numbered list markers.

HTML:

<ol class="custom-list">
  <li>Create the HTML structure</li>
  <li>Add the CSS styles</li>
  <li>Test the page in a browser</li>
</ol>

CSS:

.custom-list li {
  color: #333;
}
.custom-list li::-moz-list-number {
  color: #0066cc;
  font-size: 1.4em;
}

Where supported, the list numbers appear blue and larger than the surrounding text. Browsers that do not recognize the pseudo-element ignore the second CSS rule.

Standard Alternative

Use the standardized ::marker pseudo-element to style list numbers and bullets in modern browsers.

.custom-list li::marker {
  color: #0066cc;
  font-size: 1.4em;
  font-weight: bold;
}

The ::marker pseudo-element targets the generated list marker without changing the list item text. It works with both ordered and unordered lists.

Only certain CSS properties apply to ::marker, including color, supported font properties, and content. Properties such as padding and margins cannot be used to position the marker directly.

For new projects, use ::marker instead of the Mozilla-specific selector.

Browser Support

::-moz-list-number is a non-standard Mozilla-specific pseudo-element associated with Firefox's historical list marker implementation. It is not a portable CSS feature, and support in current Firefox releases should not be assumed.

Chrome, Edge, Safari, and other non-Firefox browser engines do not recognize this Mozilla-specific selector.

The standardized ::marker pseudo-element is widely supported in modern browsers and is the recommended alternative.

For current compatibility information, visit Can I Use? and search for CSS marker pseudo-element support.

Specifications

::-moz-list-number is a proprietary Mozilla extension and is not defined in a standard CSS specification.

The modern ::marker pseudo-element is defined in CSS Pseudo-Elements Module Level 4 .