How to set an element's class in svelte - css

Question

I have a svelte application and I wish to highlight a row when the user clicks on it; similar to this simple code:
<div id="A" class="car-even">A</div>
<div id="B" class="car-odd">B</div>
<style>
.car-even {
color: #008800;
cursor: pointer;
}
.car-odd {
color: red;
cursor: pointer;
}
.car-selected {
color: blue;
background-color: #ffffaa;
cursor: pointer;
}
</style>
<script>
row = document.getElementById('A')
row.className = 'car-selected '
</script>
But in svelte the className does not seem to be updated correctly. What is wrong?
App.svelte
<script>
import Car from './cars.svelte'
let car = ''
$: console.log('Car', car)
</script>
<Car bind:selected_car={car}/>
Cars.svelte
<script>
let cars = ['Audi', 'BMW', 'Hillman', 'Hyundai', 'Jaguar']
export let selected_car = ''
let car_class = ['car-even', 'car-odd']
function carClicked(car) {
selected_car = car
let car_row = document.getElementById(car)
car_row.className = 'car-selected'
}
</script>
{#each cars as car, index (car)}
<div id={car} class="{car_class[index % 2]}" on:click={() => carClicked(car)}>{car}</div>
{/each}
<style>
.car-even {
color: #008800;
cursor: pointer;
}
.car-odd {
color: #000088;
cursor: pointer;
}
.car-selected {
background-color: #ffffaa;
cursor: pointer;
}
</style>

Answer 1

Your example doesn't seem to work, because the .car-selected css class isn't compiled, because it's not used anywhere (the compiler knows of). If you have a look at the html, the class gets added on click (but this also overwrites/removes the other class)
If you add :global() modifier :global(.car-selected), you see the class is applied
To do it the Svelte way, use the class:directive instead and add this to the div inside the each loop
class:car-selected={car === selected_car}
You could then get rid of carClicked() if you wanted REPL
{#each cars as car, index (car)}
<div id={car}
class="{car_class[index % 2]}"
class:car-selected={car === selected_car}
on:click={() => selected_car = car}
>
{car}
</div>
{/each}
((+ why not reduce repetition and make use of Svelte's scoped styling and add
div {
cursor: pointer;
user-select: none;
}
))