select nested element with :has - html

Question

I have a html structure like this:
<kendo-label>
<label class="k-label"></label>
</kendo-label>
<kendo-textbox class="k-input-solid"></kendo-textbox>
If I click in the textbox (focus), the label should have a different color. For this I have this selector, which works well:
kendo-label:has(+ .k-input-solid:focus-within) .k-label {
color: var(--blue-05);
font-weight: 600;
}
Now, I have a new structure with a div like this:
<kendo-label>
<label class="k-label"></label>
</kendo-label>
<div>
<kendo-textbox class="k-input-solid"></kendo-textbox>
</div>
This div is inserted by the component provider, so I have to accept it as it is.
The question is, how can I now achieve the same result?
I tried this:
kendo-label:has(+ div):has(+ .k-input-solid:focus-within) .k-label {
color: var(--blue-05);
font-weight: 600;
}
But the label isn't selected.
With this I get selected the label:
kendo-label:has(+ div) .k-label {
color: var(--blue-05);
font-weight: 600;
}
But I need this rule only, if the textbox has focus. How should I attach this rule too?

Answer 1

Put all the requirements into the same has function:
kendo-label:has(+ div .k-input-solid:focus-within) .k-label {
color: var(--blue-05);
font-weight: 600;
}
.test:has(+ div .k-input-solid:focus) .k-label {
color: blue;
font-weight: 600;
}
<div class="test">
<label class="k-label">test</label>
</div>
<div>
<input class="k-input-solid"/>
</div>