疑似クラス:has()を活用してみよう!マークアップfacebooktwitterCSSの疑似クラスである:has()がようやく全ブラウザに対応してくれました!「:has()ってなんだ?」という方もいらっしゃるかもしれません。通常は水色のボックスである『#abc』の中に『.xyz』が現れると『#abc』の背景をピンクにする、ということができます。これまでは親要素に対して子要素が影響を与えることはJavaScriptなどに頼る必要があり、cssのみでは困難でした。:has()すべてを解決してくれます。個人的にここ最近使用した中では、チェックボックスなどの装飾がとても便利に感じました。これまでだと囲む要素が多かったのですが、短いコードで済むようになります。CodePen.このようにボタン状にした時、例えばcheckboxにチェック(checked)が入ったら値を取るのに色々と囲みなどを使って装飾をする必要がありました。:has()を使用すればチェックが入ったら親のlabelの色を変える、というすごくわかりやすい書き方ができます!—:has()を使用すれば、記述がだいぶ楽になります。これを機に、これまで使用してきた記述を見直してみるとコードを短縮できるかもしれません。最近はWordPressを触るのが好きです。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。(エイトビット)東京都目黒区でWebサイト制作、Webシステム開発などを行っております。コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。見積りシミュレーションをご用意いたしました。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。※この記事は2024年10月現在の情報です。WordPressでも利用することは可能ですが、WordPressはセッション関数を推奨していません。