Inspect the working example
The checkbox means Highlight this sample. It changes a local border only; it does not authorize or release any record.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Unchecked | Inspect native checked state | Parent border gray |
| Checked | Toggle checkbox | Parent border green |
| Selector direction | Inspect :has on parent | Parent selected by descendant state |
Follow the browser mechanism
:has is a relational selector anchored on the parent. Its relative selector can match a checked descendant. Native checkbox behavior supplies the state; CSS supplies the visual rule. Actual engine support is required and checked.
A descendant selector cannot climb to the parent
The alternative puts .sample after input:checked, asking for a descendant inside the input.
<style>body{margin:8px}</style>
<style>.sample{border:2px solid rgb(140,140,140)}input:checked .sample{border-color:rgb(0,80,40)}</style><section class="sample"><label><input id="show" type="checkbox">Highlight this sample</label></section>Checking the input leaves the parent gray because that selector matches no element in this tree.
Try the repair
Does checking this display sample constitute a stock-release action?
Show the worked answer
No. The only implemented effect is a CSS border change. A business release needs its own authorized operation.
- Run with JavaScript disabled and observe actual native toggles.
- Require support and computed border evidence, not a static green screenshot.