Q: How to add styles to parent element depending on child's attribute value? I have a div and inside that div there is adsense ad unit code with  tag. Using css we can detect the data-ad-status attribute. If the attribute value is unfilled I want to change some styles of the parent div, like background color. It is possible with javascript, but I want to do it with css as already the detection is working with css. Please help me with any solution - any css approach - my css variable cannot change the style of parent div
CSS
ins.adsbygoogle[data-ad-status="unfilled"] < .ads-style-feed-phone
{       
    background: var(--set-background);
}
.ads-style-feed-phone
{
    width: 300px;
    --set-background: grey;
}

/* another check */
    
ins.adsbygoogle[data-ad-status="unfilled"] 
{
    display: none !important;
    --set-background: grey;
}
.ads-style-feed-phone
{
    width: 300px;
    background: var(--set-background);
}

HTML
        <div class="ads-style-feed-phone">
             
             <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxx"
             crossorigin="anonymous"></script>
             <ins class="adsbygoogle"
                  style="display:block"
                  data-ad-format="fluid"
                  data-ad-layout-key="xxxxxxxxxxx"
                  data-ad-client="ca-pub-xxxxxxxxxxx"
                  data-ad-slot="xxxxxxxxxx">                         
             </ins>
             <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

        </div>

I want to change some styles of the parent div depending on  tag's data-ad-status attribute value. Using javascript's MutationObserver method is getting kinda messy. Is it possible to do with css?
