counters

Description
Syntax
Examples
Links

Description

The counters function for CSS represents the values of all the counters in the element’s CSS counters set named <counter-name> using the counter style named <counter-style>, sorted in outermost-first to innermost-last order and joined by the specified <string>.

Syntax

CSS

counters()

Values

<counters()> =
    counters(
        <counter-name>,
        <string>,
        <counter-style>?
    )

<counter-name>

Represents the name as a <custom-ident>.

<string>

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

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

<counter-style-name>

Represents 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

numeric

alphabetic

symbolic

fixed

<string>

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

<image> =
    <url> |
    <gradient>

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

<string>

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

<url-modifier>

Changes the meaning or the interpretation of the URL.

<url-token>

A URL token.

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

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

<angle>

A number with a unit: deg (360 degrees in a full circle), grad (400 gradians in a full circle), rad (2π radians in a full circle), or turn (1 turn in a full circle).

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

left

Left

right

Right

top

Top

bottom

Bottom

<color-interpolation-method> =
    in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]

<rectangular-color-space> =
    srgb |
    srgb-linear |
    lab |
    oklab |
    xyz |
    xyz-d50 |
    xyz-d65

srgb

Accepts three numeric parameters, representing red, green, and blue. In-gamut colors have all three components in the range [0, 1]. The whitepoint is D65.

srgb-linear

The same as srgb except that the transfer function is linear-light (there is no gamma-encoding).

lab

Accepts three numeric parameters, representing lightness and hue (a axis and b axis).

oklab

Improved lab.

xyz

Accepts three numeric parameters, representing the X,Y and Z values. The reference white is D65.

xyz-d50

Accepts three numeric parameters, representing the X,Y and Z values. The reference white is D50.

xyz-d65

Accepts three numeric parameters, representing the X,Y and Z values. The reference white is D65.

<polar-color-space> =
    hsl |
    hwb |
    lch |
    oklch

hsl

Accepts three numeric parameters, representing hue, saturation, and lightness.

hwb

Accepts three numeric parameters, representing hue, whiteness, and blackness.

lch

Accepts three numeric parameters, representing lightness, chroma, and hue.

oklch

Improved lch.

<hue-interpolation-method> =
    [ shorter | longer | increasing | decreasing ] hue

shorter

Shorter

longer

Longer

increasing

Increasing

decreasing

Decreasing

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

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

<color()> =
    color(
        <colorspace-params>
        [ / [ <alpha-value> | none ] ]?
    )

<colorspace-params> =
    <predefined-rgb-params> |
    <xyz-params>

<predefined-rgb-params> =
    <predefined-rgb>
    [ <number> | <percentage> | none ]{3}

<predefined-rgb> =
    srgb |
    srgb-linear |
    display-p3 |
    a98-rgb |
    prophoto-rgb |
    rec2020

srgb

The same as legacy sRGB colors, such as rgb().

srgb-linear

The same as srgb except that the transfer function is linear-light (there is no gamma-encoding).

display-p3

It uses the same primary chromaticities as [DCI-P3], but with a D65 whitepoint, and the same transfer curve as sRGB.

a98-rgb

The transfer curve is a gamma function, close to but not exactly 1/2.2.

prophoto-rgb

The transfer curve is a gamma function with a value of 1/1.8, and a small linear portion near black. The white point is D50.

rec2020

ITU Reference 2020 is used for Ultra High Definition, 4k and 8k television.

<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<percentage>

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

none

Specifies a missing component.

<xyz-params> =
    <xyz-space>
    [ <number> | <percentage> | none ]{3}

<xyz-space> =
    xyz |
    xyz-d50 |
    xyz-d65

xyz

Diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white is D65.

xyz-d50

Diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white is D50.

xyz-d65

Diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white is D65.

<number>

<percentage>

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

none

Specifies a missing component.

<alpha-value> =
    <number> |
    <percentage>

<number>

<percentage>

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

none

Specifies a missing component.

<color-stop-length> =
    <length-percentage>{1,2}

<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()> =
    repeating-linear-gradient(
        [ [ <angle> | to <side-or-corner> ] || <color-interpolation-method> ]? ,
        <color-stop-list>
    )

<angle>

A number with a unit: deg (360 degrees in a full circle), grad (400 gradians in a full circle), rad (2π radians in a full circle), or turn (1 turn in a full circle).

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

left

Left

right

Right

top

Top

bottom

Bottom

<color-interpolation-method> =
    in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]

<rectangular-color-space> =
    srgb |
    srgb-linear |
    lab |
    oklab |
    xyz |
    xyz-d50 |
    xyz-d65

srgb

Accepts three numeric parameters, representing red, green, and blue. In-gamut colors have all three components in the range [0, 1]. The whitepoint is D65.

srgb-linear

The same as srgb except that the transfer function is linear-light (there is no gamma-encoding).

lab

Accepts three numeric parameters, representing lightness and hue (a axis and b axis).

oklab

Improved lab.

xyz

Accepts three numeric parameters, representing the X,Y and Z values. The reference white is D65.

xyz-d50

Accepts three numeric parameters, representing the X,Y and Z values. The reference white is D50.

xyz-d65

Accepts three numeric parameters, representing the X,Y and Z values. The reference white is D65.

<polar-color-space> =
    hsl |
    hwb |
    lch |
    oklch

hsl

Accepts three numeric parameters, representing hue, saturation, and lightness.

hwb

Accepts three numeric parameters, representing hue, whiteness, and blackness.

lch

Accepts three numeric parameters, representing lightness, chroma, and hue.

oklch

Improved lch.

<hue-interpolation-method> =
    [ shorter | longer | increasing | decreasing ] hue

shorter

Shorter

longer

Longer

increasing

Increasing

decreasing

Decreasing

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

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

<color()> =
    color(
        <colorspace-params>
        [ / [ <alpha-value> | none ] ]?
    )

<colorspace-params> =
    <predefined-rgb-params> |
    <xyz-params>

<predefined-rgb-params> =
    <predefined-rgb>
    [ <number> | <percentage> | none ]{3}

<predefined-rgb> =
    srgb |
    srgb-linear |
    display-p3 |
    a98-rgb |
    prophoto-rgb |
    rec2020

srgb

The same as legacy sRGB colors, such as rgb().

srgb-linear

The same as srgb except that the transfer function is linear-light (there is no gamma-encoding).

display-p3

It uses the same primary chromaticities as [DCI-P3], but with a D65 whitepoint, and the same transfer curve as sRGB.

a98-rgb

The transfer curve is a gamma function, close to but not exactly 1/2.2.

prophoto-rgb

The transfer curve is a gamma function with a value of 1/1.8, and a small linear portion near black. The white point is D50.

rec2020

ITU Reference 2020 is used for Ultra High Definition, 4k and 8k television.

<number>

<percentage>

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

none

Specifies a missing component.

<xyz-params> =
    <xyz-space>
    [ <number> | <percentage> | none ]{3}

<xyz-space> =
    xyz |
    xyz-d50 |
    xyz-d65

xyz

Diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white is D65.

xyz-d50

Diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white is D50.

xyz-d65

Diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white is D65.

<number>

<percentage>

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

none

Specifies a missing component.

<alpha-value> =
    <number> |
    <percentage>

<number>

<percentage>

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

none

Specifies a missing component.

<color-stop-length> =
    <length-percentage>{1,2}

<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(
        [ [ [ <rg-ending-shape> || <rg-size> ]? [ at <position> ]? ] || <color-interpolation-method>]? ,
        <color-stop-list>
    )

<rg-ending-shape> =
    circle |
    ellipse

circle

Circle

ellipse

Ellipse

<rg-size> =
    <rg-extent-keyword> |
    <length [0,∞]> |
    <length-percentage [0,∞]>{2}

<rg-extent-keyword> =
    closest-corner |
    closest-side |
    farthest-corner |
    farthest-side

closest-corner

The ending shape is sized so that it passes through the corner of the gradient box closest to the gradient’s center. If the shape is an ellipse, the ending shape is given the same aspect-ratio it would have if closest-side were specified.

closest-side

The ending shape is sized so that it exactly meets the side of the gradient box closest to the gradient’s center. If the shape is an ellipse, it exactly meets the closest side in each dimension.

farthest-corner

Same as closest-corner, except the ending shape is sized based on the farthest corner. If the shape is an ellipse, the ending shape is given the same aspect ratio it would have if farthest-side were specified.

farthest-side

Same as closest-side, except the ending shape is sized based on the farthest side(s).

<length>

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

<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 (%).

<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-interpolation-method> =
    in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]

<rectangular-color-space> =
    srgb |
    srgb-linear |
    lab |
    oklab |
    xyz |
    xyz-d50 |
    xyz-d65

srgb

Accepts three numeric parameters, representing red, green, and blue. In-gamut colors have all three components in the range [0, 1]. The whitepoint is D65.

srgb-linear

The same as srgb except that the transfer function is linear-light (there is no gamma-encoding).

lab

Accepts three numeric parameters, representing lightness and hue (a axis and b axis).

oklab

Improved lab.

xyz

Accepts three numeric parameters, representing the X,Y and Z values. The reference white is D65.

xyz-d50

Accepts three numeric parameters, representing the X,Y and Z values. The reference white is D50.

xyz-d65

Accepts three numeric parameters, representing the X,Y and Z values. The reference white is D65.

<polar-color-space> =
    hsl |
    hwb |
    lch |
    oklch

hsl

Accepts three numeric parameters, representing hue, saturation, and lightness.

hwb

Accepts three numeric parameters, representing hue, whiteness, and blackness.

lch

Accepts three numeric parameters, representing lightness, chroma, and hue.

oklch

Improved lch.

<hue-interpolation-method> =
    [ shorter | longer | increasing | decreasing ] hue

shorter

Shorter

longer

Longer

increasing

Increasing

decreasing

Decreasing

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

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

<color()> =
    color(
        <colorspace-params>
        [ / [ <alpha-value> | none ] ]?
    )

<colorspace-params> =
    <predefined-rgb-params> |
    <xyz-params>

<predefined-rgb-params> =
    <predefined-rgb>
    [ <number> | <percentage> | none ]{3}

<predefined-rgb> =
    srgb |
    srgb-linear |
    display-p3 |
    a98-rgb |
    prophoto-rgb |
    rec2020

srgb

The same as legacy sRGB colors, such as rgb().

srgb-linear

The same as srgb except that the transfer function is linear-light (there is no gamma-encoding).

display-p3

It uses the same primary chromaticities as [DCI-P3], but with a D65 whitepoint, and the same transfer curve as sRGB.

a98-rgb

The transfer curve is a gamma function, close to but not exactly 1/2.2.

prophoto-rgb

The transfer curve is a gamma function with a value of 1/1.8, and a small linear portion near black. The white point is D50.

rec2020

ITU Reference 2020 is used for Ultra High Definition, 4k and 8k television.

<number>

<percentage>

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

none

Specifies a missing component.

<xyz-params> =
    <xyz-space>
    [ <number> | <percentage> | none ]{3}

<xyz-space> =
    xyz |
    xyz-d50 |
    xyz-d65

xyz

Diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white is D65.

xyz-d50

Diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white is D50.

xyz-d65

Diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white is D65.

<number>

<percentage>

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

none

Specifies a missing component.

<alpha-value> =
    <number> |
    <percentage>

<number>

<percentage>

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

none

Specifies a missing component.

<color-stop-length> =
    <length-percentage>{1,2}

<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()> =
    repeating-radial-gradient(
        [ [ [ <rg-ending-shape> || <rg-size> ]? [ at <position> ]? ] || <color-interpolation-method>]? ,
        <color-stop-list>
    )

<rg-ending-shape> =
    circle |
    ellipse

circle

Circle

ellipse

Ellipse

<rg-size> =
    <rg-extent-keyword> |
    <length [0,∞]> |
    <length-percentage [0,∞]>{2}

<rg-extent-keyword> =
    closest-corner |
    closest-side |
    farthest-corner |
    farthest-side

closest-corner

closest-side

The ending shape is sized so that it exactly meets the side of the gradient box closest to the gradient’s center. If the shape is an ellipse, it exactly meets the closest side in each dimension.

farthest-corner

farthest-side

Same as closest-side, except the ending shape is sized based on the farthest side(s).

<length>

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

<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 (%).

<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-interpolation-method> =
    in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]

<rectangular-color-space> =
    srgb |
    srgb-linear |
    lab |
    oklab |
    xyz |
    xyz-d50 |
    xyz-d65

srgb

Accepts three numeric parameters, representing red, green, and blue. In-gamut colors have all three components in the range [0, 1]. The whitepoint is D65.

srgb-linear

The same as srgb except that the transfer function is linear-light (there is no gamma-encoding).

lab

Accepts three numeric parameters, representing lightness and hue (a axis and b axis).

oklab

Improved lab.

xyz

Accepts three numeric parameters, representing the X,Y and Z values. The reference white is D65.

xyz-d50

Accepts three numeric parameters, representing the X,Y and Z values. The reference white is D50.

xyz-d65

Accepts three numeric parameters, representing the X,Y and Z values. The reference white is D65.

<polar-color-space> =
    hsl |
    hwb |
    lch |
    oklch

hsl

Accepts three numeric parameters, representing hue, saturation, and lightness.

hwb

Accepts three numeric parameters, representing hue, whiteness, and blackness.

lch

Accepts three numeric parameters, representing lightness, chroma, and hue.

oklch

Improved lch.

<hue-interpolation-method> =
    [ shorter | longer | increasing | decreasing ] hue

shorter

Shorter

longer

Longer

increasing

Increasing

decreasing

Decreasing

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

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

<color()> =
    color(
        <colorspace-params>
        [ / [ <alpha-value> | none ] ]?
    )

<colorspace-params> =
    <predefined-rgb-params> |
    <xyz-params>

<predefined-rgb-params> =
    <predefined-rgb>
    [ <number> | <percentage> | none ]{3}

<predefined-rgb> =
    srgb |
    srgb-linear |
    display-p3 |
    a98-rgb |
    prophoto-rgb |
    rec2020

srgb

The same as legacy sRGB colors, such as rgb().

srgb-linear

The same as srgb except that the transfer function is linear-light (there is no gamma-encoding).

display-p3

It uses the same primary chromaticities as [DCI-P3], but with a D65 whitepoint, and the same transfer curve as sRGB.

a98-rgb

The transfer curve is a gamma function, close to but not exactly 1/2.2.

prophoto-rgb

The transfer curve is a gamma function with a value of 1/1.8, and a small linear portion near black. The white point is D50.

rec2020

ITU Reference 2020 is used for Ultra High Definition, 4k and 8k television.

<number>

<percentage>

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

none

Specifies a missing component.

<xyz-params> =
    <xyz-space>
    [ <number> | <percentage> | none ]{3}

<xyz-space> =
    xyz |
    xyz-d50 |
    xyz-d65

xyz

Diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white is D65.

xyz-d50

Diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white is D50.

xyz-d65

Diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white is D65.

<number>

<percentage>

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

none

Specifies a missing component.

<alpha-value> =
    <number> |
    <percentage>

<number>

<percentage>

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

none

Specifies a missing component.

<color-stop-length> =
    <length-percentage>{1,2}

<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 (%).

Examples

1 · counter-name

2 · counter-style

3 · JS

<!doctype html>
<html>
<head>
    <style>
        li::marker
        {
            content: var(--myvar);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value="counters(list-item, '.') '. '">counter-name</button>
    <button value="counters(list-item, '.', upper-roman) '. '">counter-style</button>
    <ul>
        <li>list-item
            <ul>
                <li>list-item</li>
                <li>list-item</li>
                <li>list-item</li>
            </ul>
        </li>
        <li>list-item
            <ul>
                <li>list-item</li>
                <li>list-item</li>
                <li>list-item</li>
            </ul>
        </li>
        <li>list-item
            <ul>
                <li>list-item</li>
                <li>list-item</li>
                <li>list-item</li>
            </ul>
        </li>
    </ul>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            document.querySelector(":root").style.setProperty("--myvar", myproperty);
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>