Svelte JavaScript In style

Question

In my style component I have a class that changes the backgound color of a button as follows:

<style>
.button:global(:nth-child(2)) {
    background-color: red;
  }
</style>

My issue is that I don't want the nth-child hard-coded, I would like it to be a variable, as seen below.

<script>
let x = 5
</script>

<style>
.button :global(:nth-child(x)) {
    background-color: red;
  }
</style>

Is this even possible?

I'm not going to convert this into an answer, someone else can, but here's the first result on DuckDuckGo for "svelte variables in style tag": svelte.school/tutorials/…, and it seems to be what you need — Samathingamajig
– Samathingamajig, Commented Sep 3, 2021 at 1:49

Stephane Vanraes · Accepted Answer · 2021-09-03 06:25:32Z

1

No it's not possible, the only thing that is possible to use the style attribute to set properties (or custom properties) on an element, but these can not be used as an argument to nth-child

answered Sep 3, 2021 at 6:25

Stephane Vanraes

16.5k3 gold badges35 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Svelte JavaScript In style

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related