Prevent parent CSS while focus on child button - css

Question

I've a <div> wrapped within <a>. a:active has css to transform the element but I don't want that behaviour (transform) to be there while I focus on bx--overflow-menu child. I am using NextJS with styled-jsx and SaSS. Below is my code :
<a class="singleTile" data-cta-type="unimplemented" href="test">
<div class="bx--row">
<div class="bx--overflow-menu" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Menu" tabindex="0">
<svg focusable="false" aria-label="open and close list of options" role="img" class="bx--overflow-menu__icon">
<circle cx="8" cy="3" r="1"></circle>
<circle cx="8" cy="8" r="1"></circle>
<circle cx="8" cy="13" r="1"></circle>
<title>open and close list of options</title>
</svg>
</div>
<div class="bx--col">
<p class="name-212">cougar</p>
<p class="name-213">Version:<span class="" style="display: inline;">test.1</span></p>
</div>
</div>
</a>
The styles:
<style>
.singleTile {
flex: none;
width: 100%;
border: 1px solid #e0e0e0;
display: block;
padding: 1rem;
transition: all 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
background-color: #ffffff;
}
a.singleTile:hover {
border-color: red;
}
a.singleTile:active {
transform: scale(.994);
}
.bx--overflow-menu{
top: 0;
right: .25rem;
position: absolute;
}
</style>
I have some idea that it can't be done with CSS only and I am also not allowed to use jQuery.
Any other suggestions will be helpful.

Answer 1

There are no parent selectors in css right now. It could be possible to implement this on next css4.
.singleTile:has(> bx--overflow-menu:active) { /* styles to apply to the singleTile tag */ }