CSS만 사용하여 하위 요소를 기반으로 상위 요소의 스타일을 지정하려면 어떻게 해야 합니까?

ul li:has(ul.sub) {
    /* Styles for parent li elements with child ul elements with class "sub" */
}

<ul class="main">
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa
        <ul class="sub">
            <li>bbbb</li>
            <li>bbbb
                <ul>
                    <li>cccc</li>
                    <li>cccc</li>
                    <li>cccc</li>
                </ul>
            </li>
            <li>bbbb</li>
            <li>bbbb</li>
            <li>bbbb</li>
        </ul>
    </li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
</ul>

ul li:has(ul.sub) {
    background-color: lightblue;
}