コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

トップ > CSS > まだ使ってない人は急いで！:hasセレクタの実践的な使い方6選

まだ使ってない人は急いで！:hasセレクタの実践的な使い方6選

CSS

6 practical uses of the CSS :has selector

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

ウェブ開発の絶えず進化する領域において、CSSは私たちがウェブページをスタイリングする方法を簡素化する強力なツールを提供し続けています。これらのツールの中で、CSS :has セレクターは、コンポーネント内の特定の子要素の存在に基づいてスタイルを適用する能力で際立っています。この機能は、従来はJavaScriptでのみ実現可能だったCSSに新しいレベルの動的性と条件付けを導入します。

この記事では、:has セレクターの実践的な実例を深く掘り下げ、UI/UXデザインを向上させ、コーディング実践を簡素化し、よりクリーンで効率的なスタイルシートを維持するその可能性を紹介します。リスト内の緊急アイテムのハイライトからフォームレイアウトの動的調整まで、各例はこの強力なセレクターをフロントエンド開発プロジェクトで活用するための洞察と技術を提供します。

1. 特定の <button> を含む <div> のスタイリング

ユーザーインターフェースで、特定の <div> 要素が .urgent クラスを持つ <button> を含む場合を考えてみましょう。これらの <div> コンテナに注目を集めるための明確な背景色を付け、緊急のアクションを通常のものと区別したいとします。CSSは次のように書くことができます：

div:has(> button.urgent) {
  background-color: #ffcccc; /* 薄い赤の背景 */
  border-left: 5px solid red; /* 強い赤の左ボーダー */
  padding: 10px;
  margin-top: 20px;
}

説明：

:has セレクターは、.urgent クラスを持つ <button> を直接含む <div> をターゲットにするために使用されています。> 結合子が重要で、これはスタイルが .urgent ボタンがDOMツリーのさらに下にネストされている <div> 要素には適用されないことを保証します。

この例では、選択された <div> 要素は薄い赤の背景と太い赤の左ボーダーでスタイリングされ、ユーザーに即座に重要性を示します。パディングとマージンは、<div> 内のスペースを提供し、周囲の要素から分離することで、視覚的な魅力と読みやすさを向上させます。

2. 特定のアイテムを含むリストのハイライト

「緊急」とマークされたアイテムを含むリストをハイライトしたいシナリオを考えてみましょう。:has セレクターを使用して、これを実現する方法は次のとおりです：

ul:has(li.urgent) {
  background-color: #ffdddd;
  border-left: 5px solid red;
}

この例では、.urgent クラスを持つ <li> を少なくとも1つ含む <ul> 要素に、薄い赤の背景と太い赤の左ボーダーが適用されます。この視覚的な区別により、どのリストが緊急アイテムを含んでいるかが即座に明らかになります。

説明：

:has セレクターは、親要素内で指定された条件をチェックします。上記のコードスニペットでは、ul:has(li.urgent) セレクターは、.urgent クラスを持つ <li> 子要素が少なくとも1つある場合にのみ、<ul> 要素にスタイルを適用します。このアプローチは、JavaScriptを使用せずに子コンテンツに基づいてスタイルを適用できるため、特に有利です。これにより複雑さが軽減され、パフォーマンスが向上します。

3. 期限切れのアイテムを含むタスクリストのハイライト

タスクが異なるリストの下でカテゴリ分けされているタスク管理アプリケーションがあるとします。リスト内の各タスクは「期限切れ」としてフラグを立てることができます。:has セレクターを使用して、期限切れのタスクを含むリストをハイライトし、ユーザーに効果的に警告することができます。

<ul class="task-list">
    <li class="task">請求書を支払う</li>
    <li class="task overdue">レポートを提出する</li>
    <li class="task">ミーティングをスケジュールする</li>
</ul>
<ul class="task-list">
    <li class="task">ブログ記事を書く</li>
    <li class="task">履歴書を更新する</li>
</ul>

ul.task-list:has(li.overdue) {
    border: 2px solid red;
    background-color: #ffcccc;
}

説明：

上記の例では、:has セレクターは .overdue クラスを持つ <li> 要素を少なくとも1つ含む .task-list クラスを持つ <ul> 要素をターゲットにします。ターゲットされたリストは赤いボーダーと薄い赤の背景でスタイリングされ、ページ上で目立つようになります。この視覚的な手がかりは、ユーザーが緊急の注意を必要とするリストを即座に認識するのに役立ちます。

この方法は、JavaScriptを使用してDOMをトラバースし、動的にスタイルを適用する従来のアプローチをバイパスします。:has セレクターを使用することで、スタイリングがよりクリーンで宣言的になります。CSS エンジンが条件付きフォーマットを内部で処理するため、フロントエンドコードがより単純になり、潜在的にパフォーマンスが向上します。

4. フォームの使いやすさの向上

ウェブサイト上のフォームの使いやすさは、全体的なユーザーエクスペリエンスにおいて重要な役割を果たします。効率的で動的なフォームは、インタラクションとユーザー満足度を大幅に向上させることができます。CSS :has セレクターは、フォーム内の特定の子要素や特定の属性の存在に基づいて条件付きでスタイルを適用できるようにすることで、フォームの使いやすさを向上させる可能性を開きます。このセレクターを活用してフォーム要素の外観と動作を動的に変更する方法を探ってみましょう。

動的なラベル強調

しばしば、フォーム要素は必須の場合に視覚的な強調が必要です。従来、これはJavaScriptを介して処理される可能性がありますが、:has セレクターを使用することで、純粋なCSSを使用してこのプロセスを簡素化できます。特定の入力フィールドが必須としてマークされているフォームを考えてみましょう。これらのラベルを異なるスタイルにして、ユーザーの注意を即座に引きたい場合があります。

:has セレクターを使用して必須フィールドのラベルを太字と色付きにする方法は次のとおりです：

/* 必須入力フィールドのラベルをスタイリングするCSS */
form label:has(+ input[required]) {
  color: #d32f2f;  /* 強調のための赤色 */
  font-weight: bold;
}

この例では、:has セレクターは required 属性を持つ input 要素が直後に続く label 要素をターゲットにします。プラス記号（+）は隣接兄弟結合子を示し、スタイリングは input が label の直後にある場合にのみ適用されることを意味します。

入力検証のための視覚的フィードバック

フォームにおける :has セレクターのもう一つの実用的な使用法は、入力検証状態に基づいて視覚的フィードバックを提供することです。例えば、入力フィールドに不正確または不完全な値が含まれている場合、エラーを示すためにその周囲のボーダーをハイライトしたり、背景色を変更したりすることができます。

/* 検証エラーのある入力フィールドをハイライトするCSS */
form:has(input:invalid) {
  border: 1px solid #e53935;  /* エラー表示のための赤いボーダー */
  background-color: #ffebee;  /* より良い視認性のための薄い赤の背景 */
}

このスニペットは、無効な状態（:invalid）の input 要素を含むフォームにスタイルを適用するために :has セレクターを使用する方法を示しています。これにより、ユーザーに即座な視覚的手がかりを提供し、送信エラーを防ぎ、フォームの完了率を向上させるのに役立ちます。

コンテンツに基づくフォームレイアウトの適応

時には、フォーム要素のレイアウトを、存在する入力の種類や数に基づいて適応させる必要があります。例えば、デスクトップとモバイルの両方のビュー用に設計されたフォームは、複数選択かテキスト入力フィールドかに応じて異なるレイアウトが必要になる場合があります。

/* フォームレイアウトを動的に調整するCSS */
form:has([type="checkbox"]), form:has([type="radio"]) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

form:has([type="text"], [type="email"]) {
  display: flex;
  flex-direction: column;
}

このコードは :has セレクターを使用して特定のタイプの入力フィールド（チェックボックスまたはラジオ）の存在をチェックし、これらの要素をより適切に収容するためにグリッドレイアウトを適用します。逆に、テキストまたはメール入力が存在する場合、フレックスボックスを使用して垂直レイアウトに切り替えます。この適応性は、異なるデバイスや画面サイズにわたってフォームの使いやすさを向上させます。

5. レスポンシブデザインの強化

複数の記事を含むウェブページを想像してください。各記事には様々な画像が混在しています。一部の画像は縦長で、狭い列に最適に表示され、他の画像は横長で、効果的に表示するにはより広いスペースが必要です。:has セレクターを使用して、各記事のレイアウトを含まれる画像のタイプに基づいて動的に調整できます。

/* すべての記事の基本スタイル */
article {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

/* 横長画像を含む記事のレイアウト調整 */
article:has(img[orientation="landscape"]) {
  flex-direction: row;
}

/* 縦長画像を含む記事のレイアウト調整 */
article:has(img[orientation="portrait"]) {
  flex-direction: column;
}

この例では、各 article 要素は通常、そのコンテンツを列形式で表示します。ただし、記事に orientation="landscape" 属性を持つ画像が含まれている場合、レイアウトは行形式に切り替わり、水平方向のスペースをより有効に使用します。逆に、画像が縦長の場合、デフォルトの列レイアウトが維持されます。

説明と洞察 :has セレクターは、article 要素内の特定の属性（orientation）を持つ画像の存在をチェックします。これにより、画像の向きに基づいて異なるCSSスタイルを適用できます。これは特に、コンテンツタイプに動的に適応することでユーザーエクスペリエンスを大幅に向上させることができるレスポンシブデザインにおいて有用です。

このアプローチは、コンテンツに基づいてレイアウトを変更するための追加のJavaScriptやサーバーサイド処理の必要性を減らし、ページの読み込みとレンダリングプロセスを合理化します。また、CSSをビジュアル調整の主要なツールとしての役割を維持し、スタイリングロジックをスタイルシート内に保ち、複数の技術にまたがって散らばることを防ぎます。

6. ネストされたコンテンツに基づくホバー状態のスタイリング

画像や特定のタイプのボタンを含む場合にのみ、ホバー時にカード要素を異なるスタイルにしたいシナリオを考えてみましょう。これにより、インタラクティブな要素に対する視覚的フィードバックを改善し、インターフェースをより直感的にすることができます。

<div class="card">
  <img src="thumbnail.jpg" alt="サムネイル">
  <h3>カードタイトル</h3>
  <p>長くなる可能性のあるカードコンテンツの説明。</p>
  <button class="special-action">詳細を見る</button>
</div>

.card:hover:has(img) {
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.card:hover:has(.special-action) {
  background-color: #f0f0f0;
  border-left: 5px solid blue;
}

説明：

上記のCSSスニペットでは、:has セレクターを使用して、ホバー時に .card 要素内の特定の条件をチェックしています：

  • .card:hover:has(img): 要素を含む .card にホバーした際に影の効果を適用します。この視覚的な手がかりは、ユーザーが画像をクリック可能またはインタラクティブなコンテンツと関連付けるのに役立ちます。
  • .card:hover:has(.special-action): .special-action クラスを持つボタンを含む .card にホバーした際に、背景色を変更し、特徴的な左ボーダーを追加します。このスタイルの変更により、ボタンが目立ち、ユーザーがクリックするよう促します。

これらのセレクターは、要素のコンテンツに基づいて動的なスタイリングのレイヤーを追加し、開発者がJavaScriptに頼ることなく、より応答性が高く直感的なインターフェースを作成できるようにします。

結論

結論として、CSS :has セレクターは、JavaScriptに大きく依存することなく、レスポンシブで直感的なデザインを実装するための堅牢なソリューションを提供します。この記事では、6つの実践的な例を通じて、このセレクターがウェブデザインのさまざまな側面を強化するために効果的に使用できる方法を示しました。重要な情報のハイライトから、コンテンツに基づくUI要素の動的調整まで、幅広い応用が可能です。スタイリングプロセスの合理化、サイトパフォーマンスの向上、あるいはデザインに洗練さを加えることを目指す場合でも、:has セレクターはフロントエンド開発者のツールキットにおいて貴重なツールとなります。ウェブテクノロジーが進化し続ける中で、このような高度なCSS機能を取り入れることで、あなたのプロジェクトを常に最先端に保つことができるでしょう。

©コハム