select nested element with :has-CodePudding

I have a html structure like this:

<kendo-label>
 <label ></label>
</kendo-label>
<kendo-textbox ></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 ></label>
</kendo-label>
<div>
  <kendo-textbox ></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?

CodePudding user response：

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 >
  <label >test</label>
</div>
<div>
  <input />
</div>