'when child element has only :focus-visible, how to get parent element :focus-within?

When a child element has only focus-visible, how to get parent parent element focus-within?

I want the parent get outline when focus child by keyboard. But this code is always has focus(outline) when I click to label or checkbox.

How can I do this? I'm trying

.parent:focus-within:not(:focus){ ~~ }

but it failed.

This is my code:

.parent:focus-within {
    outline: red auto 1px;
}
.child:focus {
    outline-color: red;
}
.child:focus:not(:focus-visible) {
    outline: 0;
}
<pre>
<label class="parent">
  <input type="checkbox" class="child">
</label>
</pre>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source