Search code examples
sveltesvelte-3

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?

Solution

  • 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