フォロー

jQuery卒業の一歩！CSSだけで「親要素にスタイル」を当てられる :has() 擬似クラス

by

こんにちは、戦うエンジニア応援団長🔥です。
水曜恒例「エンジニア豆知識」では、“1ランク上のフロントエンド小ワザ”をゆるっとご紹介します。

🍭 そもそも :has() って？

CSS Selectors Level 4 で追加された親要素の状態を子要素で判定できる擬似クラスです。
従来は $('.parent:has(.child)') のように jQuery 依存だった処理が、CSS だけで完結できます。

/* ボタン内に .icon があるときだけ余白調整 */

⚙️ サンプル：入力欄を「未入力なら赤枠」にしたい

<form class="contact">
  <label>お名前
    <input type="text" required>
  </label>
</form>

下記 CSS を貼るだけで、JavaScript なしでもバリデーション風の赤枠が出せます！

/* 空欄の input を持つ label だけ赤に */
label:has(input:invalid) {
  border: 2px solid #e63946;
}

CodePen デモはこちら（※編集可）

🚦 ブラウザ対応とフォールバック

  • 2025/05 時点：Edge・Chrome・Safari・Firefox 最新版でサポート済み
  • 旧ブラウザでは自動的に無視される＝従来の見た目を維持
  • 「対応していない場合は JS で代替」も可能。Progressive Enhancement に最適◎

💡 団長ポイント

「脱 jQuery？ いや、必要な処理を最小コストで書くための選択肢が増えただけだ。 コードはシンプルに、頭脳はクールに。 諦めないエンジニアだけが、新しい武器を使いこなせる！」

🔚 まとめ

:has() を使えば、親要素の装飾変更や UI 状態制御がサクッと完了。
「ちょっとした動きのためだけに JS を書く」負担を大きく削減できます。
ぜひ次の案件や個人サイトで試してみてくださいね！

それではまた来週の豆知識でお会いしましょう。
戦え、エンジニア諸君！！🔥

コメントする