5

I've been trying a few things but didn't find any that perfectly fits what I want to do.

The following snippet is the kind of things I'd like to achieve…

ul {
  --liWidth: 10px;
}

ul li {
  margin-left: calc(var(--liWidth) * var(--n));
  font-size: calc(20px - 1px * var(--n));
}
<ul>
  <li style="--n: 1;">LI 1</li>
  <li style="--n: 2;">LI 2</li>
  <li style="--n: 3;">LI 3</li>
  <li style="--n: 4;">LI 4</li>
  <li style="--n: 5;">LI 5</li>
  <li style="--n: 6;">LI 6</li>
  <li style="--n: 7;">LI 7</li>
  <li style="--n: 8;">LI 8</li>
</ul>

… But without using my n CSS-var.
Why? I don't want to type it if using a hundred lis.

Is there anything like margin-left: calc(var(--liWidth) * nth-of-type()); possible ?
If it's not, what is the easiest without using JavaScript ? (I already know how to do with it)

Thanks in advance.

Takit Isy
  • 9,688
  • 3
  • 23
  • 47
  • 1
    check this : https://stackoverflow.com/a/53611964/8620333 – Temani Afif Mar 07 '19 at 14:47
  • Hey @TemaniAfif, nice one. I'm gonna edit my question. The "stair" effect isn't necesarilly what I want (but it was the easiest to do). It could be a font increase, for example. – Takit Isy Mar 07 '19 at 15:02
  • I don't think you can easily do such thing without nested element (anoher example: https://stackoverflow.com/a/49977591/8620333) .. Your only easy way will be to use SASS/LESS to generate the code – Temani Afif Mar 07 '19 at 15:14
  • @Paulie_D Where is the duplicate?… These are 2 questions on 2 different topics/methods: 1) Stylize by index 2) Allow additive properties ⋅⋅⋅ If you want me to change the visual "goal" so that they look more different, I can. – Takit Isy Mar 08 '19 at 12:49
  • **Essentially** you are asking the same question which is why IMO it's a duplicate. The answer is still that this is *not possible* with CSS. – Paulie_D Mar 08 '19 at 12:55
  • @Paulie_D If by *the same question* you mean that I ask if it is possible, yes, that's true. But, as I said, the topics are different. I don't mean to be rude, but I don't think all the question with "Is is possible to … ?" are duplicates. – Takit Isy Mar 08 '19 at 13:01
  • @Paulie_D Anyway, if you really want to keep one of my topics as a *duplicate*, you could at least put it on the other, as this one was the first one. – Takit Isy Mar 08 '19 at 13:57
  • @Paulie_D I'd like some feedback here, some discussion. Something constructive, in fact. I feel like I'm left out without good reason. – Takit Isy Mar 08 '19 at 15:43
  • @Paulie_D I'm still waiting. – Takit Isy Apr 05 '19 at 13:19
  • @Paulie_D As you seem to be active right now… Do you still don't want to answer here? – Takit Isy May 15 '19 at 12:27
  • I have nothing more to add. – Paulie_D May 15 '19 at 12:43
  • @Paulie_D That's a shame, I thought this place was meant to exchange. – Takit Isy Aug 09 '19 at 09:07

0 Answers0