Как связать nth-child и css переменные, т.е. прописать типа nth-child(n + var(--n))?

Question

[Полина Емельянова]

Коллеги,
прошу вас помочь мне решить задачу передачи кастомной переменной в стиль элемента.

ДАНО
Есть обертка. у которой есть атрибут с css-переменной, типа "style: --number:5:".
НЕОБХОДИМО
Забрать это ЧИСЛО у обертки и передать его в параметр CSS-счетчика nth-child, типа nth-child(n + var(--number)).
Я хочу с помощью этого числа скрыть не нужные мне элементы.
ПРОБЛЕМА
Проблема в том, что в параметр приходит или "не число", или "не элемент", в зависимости от того используется ли SASS.

ВОПРОС
Возможно ли каким-то образом решить вопрос, чтобы селектор правильно "собрался" и сработал? Использование SASS - приветствуется.

Заранее Благодарю за ответы!

Потрогать код на вкладке SCSS

Comments

[Ivan Ustûžanin]

ИМХО, такое невозможно, т.к. возникает проблема курицы и яйца: использовать css-переменные (про SCSS ничего не скажу) можно только в качестве значений других свойств и невозможно использовать где-то ещё, т.к. они «принадлежат» элементам, а на какой элемент смотреть при их использовании в селекторе, медиа-выражении и т.п.?

[xdevelx]

Note: Variables do not work inside media queries and container queries. You can use the var() function in any part of a value in any property on an element. You cannot use var() for property names, selectors(!!!), or anything aside from property values, which means you can't use it in a media query or container query.

https://developer.mozilla.org/en-US/docs/Web/CSS/U...

[Сергей delphinpro]

Не спрашивайте как решить проблему Y, спрашивайте как решить проблему X.
Проблема XY

[Антон Горецкий]

Возможно это вам поможет Как изменить выражение в :nth-child с помощью JavaScript?

Answer 1

[Полина Емельянова]

Решила сама.
Кастом пропертис действительно не работают, так как я хотела. Но они позволяют творить массу других штук.)