Scss :last-child selector problem with attribute selector - css

Question

Here is the html:
<div class="card">
<!-- First child -->
<div class="card__side">
Front
</div>
<!-- Last child -->
<div class="card__side--back-1">
Back
</div>
</div>
and here is the scss code:
.card {
perspective: 150rem;
position: relative;
height: 50rem;
&:hover &__side {
&:first-child {
transform: rotateY(180deg);
}
&:last-child {
transform: rotateY(0deg);
}
}
[class*="card__side"] {
font-size: 2rem;
height: 50rem;
transition: all .8s ease;
position: absolute;
width: 100%;
backface-visibility: hidden;
&:first-child {
background-color: $color-white;
}
&:last-child {
background-color: $color-white;
transform: rotateY(180deg);
}
}
}
when I use the class name card__side--back-1, the selector [class*="card__side"] is working but the selector :last-child is not working,
however when I change the class name to card__side for both of the divs, it works.
I know I can give different classes for the task but asking to learn the main reason behind this. This is my first post so I hope I am making it right. Thanks in advance.
when I change the class name to card__side for both of the divs, it works.

Answer 1

I've solved it, the selectors work fine now.
the problem was at the &:hover &__sideselector at line 5.
I've changed the 5th line of the scss code to &:hover [class*="card__side"] now it selects.
.card {
perspective: 150rem;
position: relative;
height: 50rem;
&:hover [class*="card__side"] {
&:first-child {
transform: rotateY(180deg);
}
&:last-child {
transform: rotateY(0deg);
}
}
[class*="card__side"] {
font-size: 2rem;
height: 50rem;
transition: all .8s ease;
position: absolute;
width: 100%;
backface-visibility: hidden;
&:first-child {
background-color: $color-white;
}
&:last-child {
background-color: $color-white;
transform: rotateY(180deg);
}
}
}