如何在不同数组长度下用CSS、SCSS或TypeScript设置末尾余位元素样式

我用React写了一段代码，data.cast数组的长度会随数据动态变化。我想根据array.length % 5的计算结果，给数组末尾的余数个元素设置hover样式，但找不到纯CSS的实现方案。

当前React代码：

<div className={styles.container}>
      {data?.cast.map((movie) => {
        const mod = data.cast.length%5     
        return (
          <div
            key={movie.id}
            className={styles.container_card}
            style={{ "--n": mod } as React.CSSProperties}
          >
            <MovieCard
              credit={movie}
              categoryType={keys}
              genreId={movie.genre_ids[0]}
            />
          </div>
        );
      })}
    </div>

我用SCSS编写的样式尝试：

.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  &_card {
    width: 20%;
    position: relative;
    &:hover:nth-last-child( array.length % 5  ) {
      transform: translateY(-200px);
    }
  }
}

直接用nth-last-child结合CSS自定义变量就能实现，还要处理数组长度是5的倍数的特殊情况：

方案一：子元素绑定变量 #

修改React代码，当余数为0时（即数组长度是5的倍数），把变量设为5，否则用计算出的余数：

<div className={styles.container}>
  {data?.cast.map((movie) => {
    let mod = data.cast.length % 5;
    // 5的倍数时选中最后5个元素
    if (mod === 0) mod = 5;
    return (
      <div
        key={movie.id}
        className={styles.container_card}
        style={{ "--n": mod } as React.CSSProperties}
      >
        <MovieCard
          credit={movie}
          categoryType={keys}
          genreId={movie.genre_ids[0]}
        />
      </div>
    );
  })}
</div>

对应的SCSS样式，用:nth-last-child(-n + var(--n))选中末尾的N个元素：

.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  &_card {
    width: 20%;
    position: relative;

    // 匹配末尾的--n个元素，hover时触发样式
    &:nth-last-child(-n + var(--n)):hover {
      transform: translateY(-200px);
    }
  }
}

方案二：容器绑定变量（更高效） #

把CSS变量绑定到父容器上，不用给每个子元素都设置，减少重复代码：

{data?.cast && (
  <div 
    className={styles.container}
    style={{ 
      "--n": data.cast.length % 5 === 0 ? 5 : data.cast.length % 5 
    } as React.CSSProperties}
  >
    {data.cast.map((movie) => (
      <div
        key={movie.id}
        className={styles.container_card}
      >
        <MovieCard
          credit={movie}
          categoryType={keys}
          genreId={movie.genre_ids[0]}
        />
      </div>
    ))}
  </div>
)}

对应的SCSS样式：

.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  &_card {
    width: 20%;
    position: relative;
  }

  // 通过容器的变量选中末尾的子元素
  &_card:nth-last-child(-n + var(--n)):hover {
    transform: translateY(-200px);
  }
}

内容的提问来源于stack exchange，提问作者can