HTML Document File : css-parent-has.html

<title>li:has(a.active) using script</title>

<style>
li:has(a.active){
    background: rebeccapurple;
    color: white;
}
</style>

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#" class="active">Link 2 (I'm purple/colored)</a></li>
<li><a href="#">Link 3</a></li>
</ul>

<script>
parentHas("li", "a.active", style => {
    style.backgroundColor="green"; style.color="yellow" } )

function parentHas(parentSelector, hasSelector, styleApplier){
    for(var parentIterated of document.querySelectorAll(parentSelector))
        if(parentIterated.querySelectorAll(hasSelector).length>0)
           styleApplier(parentIterated.style)
}
</script>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="show-source.js"></script>