Using CSS to affect great grand child - html

Question

I have a navbar that will stick to the top of the page when it slides, when this happens it adds two classes to the div "sticked in" this works perfectly but what I would like to do is
<div class="navbar navbar-expand-sm sticked in">
<div class="container">
<div class="header-logo">
<a href="http://localhost/2021/site/">
<img src="logo.svg" class="custom-logo">
</a>
</div>
</div>
</div>
After it sticks i would like to scale the img (logo.svg) down so what im looking for is the correct selectors for if "sticked in" is on my nav bar change the height of .header-logo img
for example:
.sticked.in > div > a > .header-logo img{
height: 20px;
}
obviously, these are the wrong selectors so im looking for a way of going down the css to header-logo img if "sticked in" is present

Answer 1

You don't need the > child selector. Example with toggle:
document.getElementById("toggle-class")
.addEventListener("click", function()
{
document.querySelector(".navbar")
.classList.toggle("sticked");
});
img {
height: 50px;
width: 50px;
background-color: red;
}
.sticked.in .custom-logo {
background-color: blue;
}
<div class="navbar navbar-expand-sm sticked in">
<div class="container">
<div class="header-logo">
<a href="http://localhost/2021/site/">
<img class="custom-logo">
</a>
</div>
</div>
</div>
<button id="toggle-class">Toggle</button>