:has() の事例紹介

Swetha Gopalakrishnan

Saurabh Rajpal

CSS には、カスタム ディメンションに基づいて親要素を直接選択する方法が 作成されます。これは、長年にわたりデベロッパーから最も要望が多かった機能です。「 この問題は、すべての主要なブラウザでサポートされているようになった :has() セレクタによって解決されます。変更前 :has() を使用する場合、長いセレクタを連結するか、フックのスタイルを設定するクラスを追加します。現在 要素とその子孫の関係に基づいて、スタイルを設定できます。詳細 :has() セレクタについて CSS Wrapped 2023 と すべてのフロントエンド デベロッパーが知っておくべき 5 つの CSS スニペット

このセレクタは小さく見えますが、非常に多くのユースケースに応用できます。 この記事では、e コマース企業が :has() セレクタ。

:has() はベースラインが新たに利用可能になりました。

この記事の一部である全シリーズで、 e コマース企業は、新しい CSS と UI 機能を使用してウェブサイトを強化しました。

ポリシーバザール

:has() セレクタを使用することで、JavaScript ベースの検証が不要になりました。 適切な CSS ソリューションに置き換えて使用してください。 これまでと同じエクスペリエンスでシームレスにご利用いただけます。Aman Soni 氏、Policybazaar テクニカル リーダー

Policybazaar の投資チームは :has() セレクタを効果的に適用し、 プランを比較しているユーザーを視覚的にわかりやすく示します。次の画像 比較 UI に 2 種類のプラン（黄色と青）が表示されている。各プラン 比較できるのは、その独自の型のみです。:has() を使用する（ユーザーがいずれかを選択したとき） 他の種類のプランは選択できません。

コード

:has() を使用すると、親要素とその子のスタイルを設定できます。「 次のコードは、親コンテナに .disabled-group クラスが設定されているかどうかを確認します。 存在する場合、カードはグレー表示になり、[追加] ボタンボタンを pointer-events を none に設定してクリックに反応する。

.plan-group-container:has(.disabled-group) {
  opacity: 0.5;
  filter: grayscale(100%);
}

.plan-group-container:has(.disabled-section) .button {
  pointer-events: none;
  border-color: #B5B5B5;
  color: var(--text-primary-38-color);
  background: var(--input-border-color);
}

Policybazaar のヘルスチームが実装 若干異なります。ユーザー向けのインライン クイズがあり、 :has(): 質問のチェックボックスのステータスをチェックして、質問が以下の条件を満たしているかどうかを確認します。 回答します。設定されていた場合は、次の質問に遷移するためにアニメーションが適用されます。

コード

プランの比較例では、:has() を使用して クラスです。また、次のコマンドを使用して、チェックボックスなどの入力要素の状態を確認することもできます。 :has(input:checked)。クイズを表示する図では、 紫色のバナーはチェックボックスです。Policybazaar は、質問が過去に投稿されたかどうかを :has(input:checked) を使用して応答し、もしあれば、次のコマンドを使用してアニメーションをトリガーします。 animation: quesSlideOut 0.3s 0.3s linear forwardsすると次のスライドに進みます 質問にお答えします。次のコードで、その仕組みを確認します。

.segment_banner__wrap__questions {
 position: relative;
 animation: quesSlideIn 0.3s linear forwards;
}

.segment_banner__wrap__questions:has(input:checked) {
 animation: quesSlideOut 0.3s 0.3s linear forwards;
}


@keyframes quesSlideIn {
 from {
   transform: translateX(50px);
   opacity: 0;
 }
 to {
   transform: translateX(0px);
   opacity: 1;
 }
}

@keyframes quesSlideOut {
 from {
   transform: translateX(0px);
   opacity: 1;
 }
 to {
   transform: translateX(-50px);
   opacity: 0;
 }
}

Tokopedia

Tokopedia は、商品のサムネイルが次の場合に :has() を使用してオーバーレイ画像を作成しました 動画が含まれています。商品のサムネイルに .playIcon クラスが含まれている場合、CSS は オーバーレイが追加されます。ここでは、:has() セレクタを & とともに使用しています。 適用される包括的な .thumbnailWrapper クラス内のネスト セレクタ すべてのサムネイルに適用します。これにより、CSS がよりモジュール化され、読みやすいものになります。

</ph>

コード

次のコードでは、 CSS セレクタとコンビネータ （& と >）を指定し、:has() をネストして、サムネイルのスタイルを設定します。 非対応 代替として、通常の追加の CSS クラスルールが使用されます。「 @supports selector(:has(*)) ルールは、ブラウザ サポートの確認にも使用されます。 したがって、どのブラウザのバージョンでも全体的なエクスペリエンスは同じです。

export const thumbnailWrapper = css`
  padding: 0;
  margin-right: 7px;
  border: none;
  outline: none;
  background: transparent;

  > div {
    width: 64px;
    height: 64px;
    overflow: hidden;
    cursor: pointer;
    border-color: ;
    position: relative;
    border: 2px solid ${NN0};
    border-radius: 8px;
    transition: border-color 0.25s;

    &.active {
      border-color: ${GN500};
    }

    @supports selector(:has(*)) {
      &:has(.playIcon) {
        &::after {
          content: '';
          display: block;
          background: rgba(0, 0, 0, 0.2);
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
      }
    }

    & > .playIcon {
      position: absolute;
      top: 25%;
      left: 25%;
      width: 50%;
      height: 50%;
      text-align: center;
      z-index: 1;
    }
  }
`;

:has() を使用する際の考慮事項

:has() を他のセレクタと組み合わせて、より複雑な条件を作成します。確認 has() ファミリー セレクタの例をご覧ください。

リソース:

• CSS Wrapped 2023
• :has(): ファミリー セレクタ
• デモ :has()
• バグの報告または新機能のリクエストを行いますか？ご意見をお聞かせください。

このシリーズの他の記事も参考にしてください。この記事では、e コマースの 各社はスクロールドリブンなどの新しい CSS と UI 機能を使用することで、 アニメーション、ビュー遷移、ポップオーバー、コンテナクエリです。

• ウェブ UI 機能が e コマース サイトにとって重要な理由
• スクロールドリブン アニメーションの事例紹介
• 移行の事例紹介を見る
• ポップオーバーの事例紹介
• コンテナクエリのケーススタディ