pure css stacking of position sticky without knowing component count

Question

An expanded question on :

pure CSS multiple stacked position sticky?

is there a way to calculate the top position of the followup header in order to stack the headers as per the the example. I do not know the count of the amount of headers there will be so i cannot say:

.headers {position:sticky}
.header-1 {top:0;}
.header-2 {top:1em}
.header-3 {top:2em}
.header-4 {top:3em}

but would need to calculate the difference

HTML:

<div class="container">
     <div class="headers header-1">header 1<div>
     <div class="content">This is the content<div>
     <div class="headers header-2">header 2<div>
     <div class="content">This is the content<div>
     <div class="headers header-3">header 3<div>
     <div class="content">This is the content<div>
     <div class="headers header-4">header 4<div>
     <div class="content">This is the content<div>

I would need to somehow calculate the :nth-child or :type-of or so method as the list grows. not sure if it could be done in css but would like to know if it is possible

I don't know that there's really any way for a property to adjust based on some knowledge of the amount of components that exist. But if your concern is handling a bulk of the work in CSS (like you're iterating with JS or a backend) you could always pass a CSS var through a style tag for each component and have a single style rule that depends on the var as shown in the top answer here: https://stackoverflow.com/questions/28989708/is-it-possible-to-use-the-nth-child-value-as-a-parameter-in-a-property-and-how/29852869 — JHeth, Feb 13 '20 at 09:37
If you check the link your provided you will notice that there is another link redirecting to a solution where you don't need to provided values for top: https://stackoverflow.com/a/55941740/8620333 — Temani Afif, Feb 13 '20 at 10:15

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

If the question is Can I use the n of nth-child or nth-of-type to calculate attributes automatically?

The answer is No, you can't, at least for now.

But there are several workarounds:

This one is not very elegant, but it's actually the most used one so far.

.bars span {
  display: block;
  height: 1em;
  margin-bottom: 1em;
  background-color: salmon;
}

.bars span:nth-child(1) {
  width: 1em;
}

.bars span:nth-child(2) {
  width: 2em;
}

.bars span:nth-child(3) {
  width: 3em;
}

.bars span:nth-child(4) {
  width: 4em;
}

// ... and many more

<div class="bars">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

And if you're using precompiled css such as scss, it can be shortened as:

@for $i from 1 through 20 {
  .bars span:nth-child(#{$i}) {
    width: #{$i}em;
  }
}

The other one is using css variable. But you have to assign the variables manually:

.bars span {
  display: block;
  height: 1em;
  margin-bottom: 1em;
  background-color: salmon;
}

.bars span {
  width: calc(var(--length) * 1em);
}

<div class="bars">
  <span style="--length: 1;"></span>
  <span style="--length: 2;"></span>
  <span style="--length: 3;"></span>
  <span style="--length: 4;"></span>
</div>

thanks adding the variable inside the hrml worked perfectly – Gavin Wood Feb 13 '20 at 09:51 — Gavin Wood, Feb 13 '20 at 09:51

pure css stacking of position sticky without knowing component count

1 Answers1