W3C home > Mailing lists > Public > public-css-archive@w3.org > November 2020

[csswg-drafts] [css-lists][css-counter-styles] use counter() / counters() value inside calc() (#5691)

From: Rami Yushuvaev via GitHub <sysbot+gh@w3.org>
Date: Mon, 02 Nov 2020 17:08:54 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-734675815-1604336933-sysbot+gh@w3.org>
ramiy has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-lists][css-counter-styles] use counter() / counters() value inside calc() ==
Currently we can't use the `counter()` / `counters()` **value** outside on the `content: '';` tag.

See this code:

ol {
  counter-reset: my-counter 4;

ol > li {
  counter-increment: my-counter 2;
  width: calc( 10% * counter( my-counter ) );   /* Currently this is not possible */
  background-color: red;

When using **Numeric counters**, we should be able to use the **counter value** inside the `calc()` functional notation (or any other math function - `min()`, `max()` etc).

This will allow us to style the elements based on the location of the element inside the list. Example use case is to use the counter to retrieve the element position in the list and to calculate different gradient designs.

### Alternatives

There are some alternatives like the `:nth-child(3)`, but it has no functional notation like `counter()` that allows you to retrieve the child element position value to be used inside `calc()`.

### Powerful Capabilities

Counters can be very powerful as you can set initial values (positive and negative values) and increase / decrement by any integer. But currently we are very limited with their use. Let's change that.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5691 using your GitHub account

Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 2 November 2020 17:08:56 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:22 UTC