コハム

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

CSSの常識を覆す!:has()セレクタで実現する6つのトリッキーなテクニック6選

承知しました。HTMLタグをエスケープし、コード部分はそのまま保持した文章を作成します。以下がエスケープ処理を施した文章です:

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要素をターゲットにします。プラス記号(+)は隣接兄弟コンビネータを表し、入力が直接ラベルに続く場合にのみスタイリングが適用されることを意味します。

入力バリデーションの視覚的フィードバック

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

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

このスニペットは、無効な状態(:invalid)の入力要素を含むフォームにスタイルを適用するために: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): <img>要素を含む.cardにホバーすると、シャドウ効果を適用します。この視覚的な手がかりは、ユーザーが画像をクリック可能またはインタラクティブなコンテンツと関連付けるのに役立ちます。
  • .card:hover:has(.special-action): .special-actionクラスを持つボタンを含む.cardにホバーすると、背景色を変更し、特徴的な左ボーダーを追加します。このスタイルの変更により、ボタンが目立ち、ユーザーがクリックするよう促します。

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

結論

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

©コハム