UL act like an OL => including START value

Question

It not usual to do so, but we are getting an unordered list from an external tool and have to deal with it. This is why I am asking here.

I need the ul to behave like an ol. It's easy to say, list-style-type="decimal". But I would need to have the START parameter as well.

If that is not possible to have in an easy way I would have to build something completly independant, aka

<li>
  <span>1.</span>
  <p>Text</p>
</li>

I would really like to avoid that, so my question is:

Is it possible to use an ul as an ol including the start value?

<ul start="17">

Why not insert it as an `ol` from the start? How do you get that `ul` and how do you insert it into your own HTML ? — Mihai T, Feb 19 '20 at 11:16
The JS solution from here should be easily adaptable to your needs, https://stackoverflow.com/a/23699608/10283047 — misorude, Feb 19 '20 at 11:18
@Mihat: I am getting the ul ready to use via an external partner/tool. No change possible. I could only add a class — JonSnow, Feb 19 '20 at 11:43
@misorude hmm, the ol knows how to handle a start value, ul dies not, so this is not an option at all — JonSnow, Feb 19 '20 at 11:44
This has nothing to do with what element knows how to handle what, this is simply based on _setting_ the appropriate start value taken from the element, as the start value for a CSS counter. — misorude, Feb 19 '20 at 11:55
I don't see that this js can help for what I am trying to reach. Or I don't understand it. It's not about resetting any values. It's about the behavieour, how an
handles an start value and
on the other hand does not know about start values at all. Or am I wrong? — JonSnow, Feb 19 '20 at 12:49
The solution is about adding the counter via CSS, instead of relying on the default functionality. — misorude, Feb 19 '20 at 13:01
But it should be easy to handle for a user on the other side of the desk. He should have a tool where he defines e.g. That's it. He should not handle with css or whatever — JonSnow, Feb 19 '20 at 13:07

Paulie_D · Accepted Answer · 2020-02-19T13:25:30.573

2

You can use CSS Counters and define a starting point in the counter-reset` CSS.

ul.my-list {
  list-style: none;
  counter-reset: item 17;
  /* number should always be 1 LESS than your required starting number */
}

.my-list li::before {
  counter-increment: item;
  content: counters(item, ".") ". ";
}

<ul class="my-list">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

It should be easy to handle for a user on the other side of the desk. He should have a tool where he defines e.g. <list start="17"> That's it. He should not handle with css or whatever.

That being the case, this Q&A may offer a solution..the user merely has to apply a style="--start-xx"; inline style and CSS Custom properties can handle the rest.

ul.my-list {
  list-style: none;
  counter-reset: item calc(var(--start) - 1) 
}

.my-list li::before {
  counter-increment: item;
  content: counters(item, ".") ". ";
}

<ul class="my-list" style="--start:21">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

<ul class="my-list" style="--start:10">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

edited Feb 19 '20 at 13:25

answered Feb 19 '20 at 12:52

Paulie_D

107,962
13
142
161

that's promising, but the start value has to be dynamic. Is there a way without js? – JonSnow Feb 19 '20 at 13:09
1

How are you planning on getting the start value into the page? You could always add the `style="counter-reset: item 17;"` in the *inline* CSS – Paulie_D Feb 19 '20 at 13:16
The users will use kind of a "template", where they can add an element named and add a param with value as well. That was the idea for I don't know if it will work with a style definition as well, I even don't understand how the above sample works. Where do you read (and re-set) the value? – JonSnow Feb 19 '20 at 15:25
ah, correction.. I see where you are reading it. Would this work with an (data-)attribute as well, instead of a style? – JonSnow Feb 19 '20 at 15:31
Well if you're adding some HTML to the page through this non-html "Template" then I assume you can manage to adjust the template to send what it is you need.... a `ul` since there is no such thing as `list` in HTML. If you can parse `list`=17` into `ul` then it can't be too much different to parse `start=17` to `style="--start:17"`. – Paulie_D Feb 19 '20 at 15:34
1

Nope, attributes don't work, see the linked Q&A. It would be nice, but unfortunately, not. – Paulie_D Feb 19 '20 at 15:35

UL act like an OL => including START value

1 Answers1