focus-within
◆ フォーカスが内側にあるときにマッチするセレクタ
◆ td 内にフォーカスがあるときに同じ tr 中の th のスタイルを変えることもできる
◆ td 内にフォーカスがあるときに同じ tr 中の th のスタイルを変えることもできる
JavaScript で頑張ってるのを見かけたので CSS だけで作ってみました
選択中に input の行の th の見た目を変えます
あくまで focus なのでチェックボックスがチェックされてる行の色を変えるとは行きません
はやく :has が使えるようになってほしいですね
選択中に input の行の th の見た目を変えます
<!doctype html>
<style>
th div {
position: relative;
background: powderblue;
margin-right: 20px;
padding: 20px;
}
th div:after{
content: "";
position: absolute;
border-top: 10px solid transparent;
border-left: 10px solid powderblue;
border-bottom: 10px solid transparent;
top: calc(50% - 10px);
right: -10px;
}
tr:focus-within th div {
background: gold;
}
tr:focus-within th div:after {
border-left-color: gold;
}
</style>
<table>
<tr>
<th><div>name1</div></th>
<td><input></td>
</tr>
<tr>
<th><div>name2</div></th>
<td><input></td>
</tr>
<tr>
<th><div>name3</div></th>
<td><input></td>
</tr>
</table>
あくまで focus なのでチェックボックスがチェックされてる行の色を変えるとは行きません
はやく :has が使えるようになってほしいですね