フォーカスがあたったinputに紐づくlabelを強調する
:focus-withinを使うと、その要素、または子要素にフォーカスが当たったときにスタイルを当てられる。
<form>
<div class="field">
<label for="one">One</label>
<input id="one">
</div>
<div class="field">
<label for="two">Two</label>
<input id="two">
</div>
</form>/* いったん親要素:focus-withinからlabelにたどって変更する*/
.field:focus-within label {
font-weight: bold;
}
/* 他の方法: すぐとなりにフォーカスがあたったinput要素があるときにlabelのスタイルを変更する */
label:has(+ input:focus) {
font-weight: bold;
}