WebPixPro（ウエブピクスプロ）は中小企業・個人事業主さま向けのサブスク ホームページ、月額定額制型（サブスクリプション型）のホームページ制作サービス

すべてのブラウザでサポートされた:has()擬似クラスについて

2024年2月7日

タグcss3, html, 最新の実装, CSSのセレクター機能を拡張, :has()擬似クラス, すべてのブラウザでサポート

12/19にリリースされたFirefox 121（リリース情報）でサポートされ、これで:has()疑似クラスがすべてのブラウザにサポートされました。

:has()擬似クラスは、要素が特定の子要素を持っているかどうかをチェックするために使用されます。これは、要素の構造やコンテンツに基づいてスタイルを適用する際に非常に便利です。

2024年現在、has()擬似クラスはすべての主要なブラウザーでサポートされています。

例

<div class="container">
  <p>This is a paragraph.</p>
</div>

<style>
.container {
  background-color: white;
}

.container:has(p) {
  background-color: red;
}
</style>

この例では、div.container要素にはp要素が含まれているため、背景色が赤になります。

:has()擬似クラスは、以下のようなさまざまな状況で使用できます。

• 特定の子要素を持つ要素にスタイルを適用したい場合
• 特定の子要素を持たない要素にスタイルを適用したい場合
• 子要素の数をチェックしたい場合

has()擬似クラスは、CSSのセレクター機能を拡張する強力なツールです。

その他の例：

• button:has(:focus): フォーカスされているボタン
• input:has(value): 値が入力されている入力フィールド
• a:has(img): 画像を含むリンク

詳細情報についてはこちらをご覧ください

CSS has() 擬似クラス: https://developer.mozilla.org/ja/docs/Web/CSS/:has

webpixproのデザインテンプレートも最新の技術を用いて、保守し易いソース実装を心がけています。様々タイプのデザインテンプレートを用意。テンプレートのDEMOもご覧いただけますので、気になったデザインを実際に試してみてください。

テンプレートの業種はサンプルになります。
多種多様なテンプレートをお客様の業種に合わせて差し替えが可能です。
例えば、保育園のテンプレをダンススタジオにすることもできます。
色や雰囲気でテンプレートをお選びください。