CODEWITHSUNDEEP
sveltesvelte-3
ITM007
ITM007

Reputation: 117

Svelte JavaScript In style

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?

Upvotes: 1

Views: 416

Answers (1)

Stephane Vanraes
Stephane Vanraes

Reputation: 16411

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

Upvotes: 1

Related Questions