#CSS

CSS フロントエンド

CSS の :has() で親要素を選択する

.card:has(img) { ... } で画像を含むカードにだけスタイルを当てられる。
.form:has(:invalid) .submit { opacity: 0.5 } でバリデーションエラー時にボタンを半透明に。

JS で DOM を走査していた処理の大半を CSS に置き換えられる。
:has() の引数には相対セレクタを使えるので :has(> img) のような直接子指定も可能。

read more →

All Tags