CSS 兄弟セレクターについて理解する: 初心者ガイド

CSS は、HTML ドキュメント内の特定の要素をターゲットにするための幅広いセレクターを提供します。クラスおよび ID セレクターは一般的に使用されますが、他の要素との関係に基づいて要素を常にターゲットにできるわけではありません。ここで CSS 兄弟セレクターが役に立ちます。

CSS 兄弟セレクターは、洗練された柔軟な Web レイアウトを作成するために不可欠であり、他の要素に対する相対的な位置に基づいて要素のスタイルを設定できるようになります。これらは、デザインが要素の配置に依存しており、子孫コンビネーター、子コンビネーター、隣接兄弟コンビネーターなどのさまざまなコンビネーターを使用する場合に特に便利です。このアプローチにより、余分なクラスや ID を追加せずに特定の要素にスタイルを適用できるため、コードの煩雑さを軽減できます。

CSS 兄弟セレクターとは何ですか?

CSS 兄弟セレクターは、兄弟である (同じ親要素を共有する) 要素を選択するために使用されます。つまり、同じ親を共有する他の要素との関係に基づいて HTML 要素を選択するのに役立ちます。これらのコンビネータは、ブラウザが HTML 要素間の関係を理解するのに役立つ独自のシンボルです。

CSS 兄弟セレクターには 2 つのタイプがあります:

• 隣接兄弟セレクター ( )

• 一般的な兄弟セレクター (-)

Web 開発者にとって CSS 兄弟セレクターが重要である理由は次のとおりです:

• 拡張された詳細性: 汎用セレクターと比較して、兄弟セレクターを使用すると、要素をより正確にスタイル設定できます。これにより、CSS コードの保守性と構成が強化されます。

• 動的レイアウト: 兄弟に対するアイテムの位置に焦点を当てることで、コンテンツ構造に適応するレイアウトを開発できます。コンテナの最初と最後の子を異なるスタイルでスタイリングすることを想像してください。

• 視覚的関係: アイテム間に視覚的な関係を作成できます。キャプションを強調表示してから対応する画像を表示するか、隣接するセクションの間に境界線を追加することを検討してください。

• コードの繰り返しの削減: 特定のコンテナー内の位置に応じて要素のスタイルを設定する必要がある場合、兄弟セレクターを使用すると、クラスの繰り返しの割り当ての必要性がなくなり、コードがよりクリーンになります。

• 効率: 冗長性を最小限に抑えることで、より効率的な CSS を実現できます。兄弟セレクターを使用すると、さまざまな条件下で特定の項目をターゲットにする多数のルールを作成する代わりに、ドキュメント構造に適応するシンプルで再利用可能な CSS ルールを作成できます。

• レスポンシブ デザイン: レスポンシブ Web デザインでは非常に便利です。他のアイテムとの関係に基づいてアイテムのレイアウトや外観を調整できます。これは、複数のデバイスや画面サイズにわたって一貫したユーザー エクスペリエンスを提供するために重要です。

CSS 兄弟セレクターを使用すると、純粋に要素ベースのスタイル設定アプローチを超えて進むことができます。これらにより、HTML の階層構造を利用して、より一貫性があり、視覚的に楽しいユーザー エクスペリエンスを生み出すことができます。

CSS 兄弟セレクターの種類

CSS 兄弟セレクターには、隣接セレクターと一般セレクターの 2 種類があります。どちらも開発者が兄弟関係に基づいて要素をターゲットにできるようにする上で重要ですが、動作方法が異なります。

上の図は、CSS の兄弟セレクターと、それらが要素をターゲットとする方法を示しています。

隣接する兄弟セレクター ( )

プラス記号 ( ) で表される隣接兄弟セレクターを使用すると、同じ親要素を持つ別の要素の直後の要素をターゲットにすることができます。これは、指定された要素の直後に現れる最初の兄弟要素のみをターゲットにすることを意味し、追加のクラスや ID を必要とせずに、正確でコンテキストに応じたスタイルを可能にします。

このセレクターは高レベルの精度を提供し、HTML 構造内の正確な位置に基づいて要素のスタイルを設定できます。

構文:

    element1 + element2 {
      /* CSS styles */
    }

この構文では:

• element1: ターゲット要素の前の要素を表します。

• element2: スタイルを設定する要素を表し、element1 の直後に続く必要があります。

• プラス記号 ( ): 要素間の特定の関係を示すコンビネータとして機能します。

用途:

前述したように、このセレクターは、指定された別の要素の直後の要素をターゲットとします。これは、直接の兄弟に基づいて要素をスタイル設定する場合に便利です。

• フォーム要素のスタイル設定: ユーザーが入力フィールドに注目すると、その直後のラベルを強調表示することができます。

    input:focus + label {
      color: blue;
    }

• コンテンツの書式設定: 見出しに続く段落に特別な書式設定を適用できます。

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

例: LambdaTest ブログ ページ

隣接する兄弟セレクターの使用法を示すために、LambdaTest ブログ ページの例を考えてみましょう。

隣接する兄弟セレクターが使用されたさまざまなインスタンスを分析してみましょう:

    element1 + element2 {
      /* CSS styles */
    }

これは、クラス .platform

の要素の直後に位置するリスト項目

() をターゲットとします。ナビゲーション メニューでは、このルールは、クラス .enterprise (.platform の直後にあります) の要素を、position:relative でスタイル設定されるように配置します。これにより、.enterprise 要素内のドロップダウン メニューを絶対配置を使用して配置できるようになります。

    input:focus + label {
      color: blue;
    }

これは、クラス .login を持つボタンの直後に位置するボタン要素をターゲットとします。特に 2 番目のボタンにスタイル (パディング、境界線など) を設定し、ログインと次のボタンの間に異なる視覚的な区別を作成します。

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

これは、クラス .button-container を持つ要素の直後に位置する検索入力コンテナ要素をターゲットとします。検索入力コンテナのスタイル (幅、位置など) を設定します。

    .platform + li {
        position: relative;
    }

これは少し異なる使用例です。ここで、隣接する兄弟セレクターは .search-icon * 要素をターゲットにしていますが、これは *.search-input 要素にフォーカスがある場合 (ユーザーが検索バー内をクリックした場合) に限ります。このようにして、アイコンの色とサイズを変更して、検索入力を操作するときにユーザーに視覚的なフィードバックを提供できます。

一般的な兄弟セレクター (~)

チルダ記号 (~) で表される一般的な兄弟セレクターを使用すると、同じ親を共有し、指定された要素に続く要素をターゲットにしてスタイル設定することができます。直接の兄弟のみを対象とする隣接兄弟セレクターとは異なり、一般兄弟セレクターは後続のすべての兄弟に影響します。

構文:

一般的な兄弟セレクターの構文は次のとおりです。

    .login + button {
        padding: 12px 15px;
        border: none;
        border-radius: 0.25rem;
        cursor: pointer;
        background: #eee;
    }

この構文では:

• **element1: **参照要素を表します。

• element2: element1 に続き、同じ親を共有するターゲット要素を表します。

一般的な兄弟セレクターは、HTML 構造に関連するコンポーネントをスタイルする場合に便利ですが、必ずしも互いに隣接している必要はありません。たとえば、これを使用すると、間に他の要素がある場合でも、

HTML タグ要素に続くすべての段落のスタイルを設定できます。

用途:

一般的な兄弟セレクターは、位置に関係なく、同じ親を共有する指定された要素のすべての兄弟をターゲットとします。

• ナビゲーション リンク: 一般的な兄弟セレクターを使用して、強調表示されたリンクに続くナビゲーション リンクのスタイルを設定します。

    element1 + element2 {
      /* CSS styles */
    }

• リストのスタイリング: 特定のリスト項目の後にすべてのリスト項目をスタイル設定したい場合は、一般的な兄弟セレクターを使用します。

    input:focus + label {
      color: blue;
    }

• セクションのテーマ: ドキュメント内の同じ親内の特定のセクションに続くすべてのセクションに異なるスタイルを適用します。

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

例: LambdaTest ドキュメント ページ

LambdaTest Docs Page の例では、一般的な兄弟セレクターは、.docs-category セクション内の .docs-title div に続くすべての 要素のスタイルを設定します。 。このアプローチは、リンクを他のコンテンツから区別し、構造化されたレイアウトを作成するのに役立ちます。これにより、すべての関連リンクが視覚的にグループ化され、一貫したスタイルが設定され、すっきりと整理されたデザインが維持されます。

上記の例では、CSS ルール .docs-title ~ a *は、.docs-title div の後に続くすべての *anchor () 要素をターゲットとします。使用されるスタイルには、ブロック表示、間隔のマージン、特定のテキストの色、サイズ、太さが含まれます。

これら 2 つの兄弟セレクターを理解すると、Web ページでよりターゲットを絞った動的なスタイル設定が可能になります。しかし、CSS 兄弟セレクターはすべてのブラウザーと互換性がありますか?

ブラウザの互換性

コンビネータを備えた CSS 兄弟セレクターは、Chrome、Firefox、Safari、Edge などの最新のブラウザーで広くサポートされています。ただし、古いブラウザ バージョンとの互換性を確認し、異なるブラウザで Web サイトをテストして、一貫した動作を確認することをお勧めします。

さまざまなブラウザで Web サイトのスタイルをテストし、すべてが期待どおりに機能することを確認するには、LambdaTest のようなクラウドベースのプラットフォームの使用を検討してください。これは、AI を活用したテスト実行プラットフォームで、3000 のブラウザーと OS の組み合わせにわたって手動および自動のブラウザー互換性テストを大規模に実行できます。

ベストプラクティスと考慮事項

CSS 兄弟セレクターを使用すると、Web サイトのデザインを大幅に向上させることができます。それでも、CSS スタイルシートの効率性と保守性を確保するには、ベスト プラクティスに従い、特定の考慮事項を認識することが重要です。

セレクターを組み合わせて特異性を高める

CSS 兄弟セレクターは、クラスや ID よりも低い特異性を提供します。これは、より具体性の高いスタイル ルールが競合する場合、より具体的なルールが優先されることを意味します。競合に注意し、兄弟セレクター スタイルが正しいコンポーネントをターゲットにしていることを確認してください。

兄弟選択を他の CSS セレクターと組み合わせて、特異性を高め、競合を防ぐことができます。これにより、スタイルが望ましくないインスタンスに適用されるのを防ぐことができます。

    element1 + element2 {
      /* CSS styles */
    }

兄弟セレクターの過度の使用を避ける

兄弟セレクターを過度に使用すると、CSS の読み取りと管理がより困難になる可能性があります。スタイルシートを単純化して明確にして、理解しやすくしてください。より洗練されたターゲティング シナリオには、クラスまたはアイテムのネストの使用を検討してください。

    input:focus + label {
      color: blue;
    }

セレクターの範囲を制限する

意図したよりも多くの要素を意図せずスタイル設定する可能性がある広すぎるセレクターの使用は避けてください。たとえば、div ~ div の代わりに .nav-item ~ .nav-item を使用して、関連する要素のみを確実にターゲットにします。

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

応答性と互換性を確保する

Web サイトが魅力的に見え、すべてのデバイスやブラウザーで適切に動作することを確認することが不可欠です。特定のコンテキストで CSS 兄弟セレクターを使用する場合、応答性と広範な互換性を優先することが重要です。

ここでは重要な考慮事項がいくつかあります:

• **メディア クエリ: **メディア クエリを使用して、画面サイズとデバイスの向きに基づいてスタイルをカスタマイズします。これにより、Web サイトのレイアウトがデスクトップ、ラップトップ、タブレット、スマートフォンで最適に表示されるように適応します。さまざまなデバイスやブラウザーでレスポンシブ デザインを検証するには、LambdaTest が提供する LT ブラウザーを使用します。このモバイル Web サイト テスト ツールを使用すると、53 のデバイス ビューポートでサイトをテストでき、さまざまなデバイス間で一貫した快適なユーザー エクスペリエンスを確保できます。

以下の CSS メディア クエリは、幅 992 ピクセル以下の画面のスタイルをターゲットにしており、通常は縦向きモードのタブレットやスマートフォンが含まれます。このメディア クエリ内で、ボディの高さを auto に調整したり、.logo-container img の高さを 40px に設定したりすることができます。

以下のコード スニペットは、幅 992 ピクセル以下の画面のブログ投稿セクションのレイアウトを調整するメディア クエリの例です。 .blog-image-text-container * を列方向のフレックス コンテナとして表示するように設定し、幅を 100% に調整します。 *.blog-image-container * 内の画像は、幅 100%、高さ自動でスタイル設定されます。さらに、*.table-of-content は *display: none.

を使用して非表示になります。

結果:

上記の結果は、デスクトップ、モバイル、タブレット デバイスでの Web サイトの応答性を検証するために LT ブラウザーに表示されます。

LT ブラウザの使用を開始し、アプリケーションの応答性をテストするには、下のダウンロード ボタンをクリックするだけです。

LT ブラウザの詳細と開始方法については、以下のビデオをご覧ください。

• ブラウザの互換性: 複数のブラウザ間で Web サイトの機能と外観をテストし、スタイルとレイアウトが一貫して表示されることを確認します。ブラウザーは CSS コードを若干異なる方法で解釈する場合があるため、テストは不一致を特定して対処するのに役立ちます。上で学んだように、LambdaTest を使用してクロスブラウザ テストを実行し、Web サイトがさまざまなブラウザでサポートされ、期待どおりに動作するかどうかを検証できます。

応答性と互換性を優先することで、デバイスやブラウザに関係なく、すべてのユーザーにシームレスなユーザー エクスペリエンスを提供する Web サイトを構築できます。

明確にするためにクラスを使用する

CSS 兄弟セレクターは、HTML 構造内での位置に基づいて項目をターゲットにするのに役立ちます。ただし、それらを過度に使用すると、コードの保守性が低下する可能性があります。クラスを使用すると、コードの可読性と長期的な保守性が向上します。

次のような兄弟セレクターを使用するシナリオを想像してください。

    element1 + element2 {
      /* CSS styles */
    }

このコードは、

要素に続くすべての要素を直ちにターゲットにします。

と概要の を含む多数のセクションがあるページを考えてみましょう。

ここで CSS 兄弟セレクターを使用することは、あまり明確ではありません。 *特定のセクションの

と

の間に別の要素を追加するとどうなりますか? CSS 兄弟セレクターは、意図した *

をターゲットにしなくなる可能性があります。 はこれらのセクションです。

クラスを使用すると、要素間の関係を指定して、CSS コードを読みやすく、保守しやすくすることができます。その方法は次のとおりです:

HTML:

    input:focus + label {
      color: blue;
    }

CSS:

    h2 + p {
      margin-top: 10px;
      font-size: 18px;
    }

この例では、.article-section、.article-title、.article-summary などのクラスを含めることができます。 現在の CSS スタイルこれらの特定のクラスをターゲットにすることで、コードがより明確になり、理解しやすくなります。クラスを使用すると、コードの可読性、保守性、再利用性が向上します。

この方法を採用すると、Web サイトの成長に合わせて CSS コードを保守しやすくなります。明確でよく整理されたコードは、長期的には時間を節約し、他の開発者とのコラボレーションを容易にすることに注意してください。

結論

結論として、兄弟セレクターは、開発者が項目の関係に基づいて洗練された動的なスタイルを開発できるようにする効果的な CSS 機能です。このブログでは、隣接 ( ) と一般 (~) という 2 種類の兄弟セレクターに焦点を当てます。

兄弟セレクターの有用性を実証するために、基礎を確認し、実用的な例を含め、実際のアプリケーションを検討しました。さらに、CSS を効率的かつ管理しやすく保つためのベスト プラクティスと考慮事項を強調しました。

隣接セレクターと一般兄弟セレクターを理解し、適切に使用すると、Web デザインを改善し、より洗練された視覚的に魅力的なレイアウトを開発できます。最大の結果を得るには、スタイルを適切にテストし、コードをクリーンでよく整理した状態に保ちます。

コーディングを楽しんでください!

以上がCSS 兄弟セレクターについて理解する: 初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。