CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで兄弟要素を選択する方法｜隣接兄弟セレクタ（+）と一般兄弟セレクタ（~）の違いを解説

CSSには、同じ親要素を持つ「兄弟要素」を選択するための結合子が2種類用意されています。1つは隣接兄弟結合子（+）、もう1つは一般兄弟結合子（~）です。それぞれの動作の違いを理解して、目的に応じて使い分けましょう。

隣接兄弟結合子（+）とは

隣接兄弟結合子（+）は、最初のセレクタで指定した要素の直後に隣接している要素だけをマッチさせたい場合に使用します。2つのセレクタは、必ず同じ親要素の子要素である必要があります。

CSSにおける隣接兄弟結合子の構文は以下の通りです。

Selector + Selector {
    attribute: /*値*/
}

一般兄弟結合子（~）とは

一方、2つ目に指定した要素の位置に関係なく、同じ親を持つすべての兄弟要素を選択したい場合は、一般兄弟結合子（~）を使用します。

CSSにおける一般兄弟結合子の構文は以下の通りです。

Selector ~ Selector {
    attribute: /*値*/
}

それでは、実際のコード例を使って、両者の違いを確認していきましょう。

例1：隣接兄弟結合子（+）を使用した例

<!DOCTYPE html>
<html>
<head>
<style>
#parent {
    display: flex;
    margin: 2%;
    padding: 2%;
    box-shadow: inset 0 0 24px cyan;
    justify-content: space-around;
}
div + p {
    font-size: 1.2em;
    font-weight: bold;
    background: powderblue;
}
section {
    box-shadow: 0 0 3px rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div id="parent">
<img src="https://i.picsum.photos/id/616/200/200.jpg?hmac=QEzyEzU6nVn4d_vdALhsT9UAtTU
EVhwrT-kM5ogBqKM" />
<div>
<p>Check this</p>
<section><p>Some text in section</p></section>
<span>hello</span>
</div>
<p>Selected</p>
</div>
</body>
</html>

出力結果

上記のコードを実行すると、次のような結果が表示されます。

CSSで兄弟要素を選択する方法｜隣接兄弟セレクタ（+）と一般兄弟セレクタ（~）の違いを解説

この例では、「Selected」というテキストを含む p 要素が div 要素の直後に配置されているため、div + p のスタイルが適用されています。section 要素の中にある p 要素には適用されない点に注目してください。

例2：一般兄弟結合子（~）を使用した例

<!DOCTYPE html>
<html>
<head>
<style>
#parent {
    display: flex;
    margin: 2%;
    padding: 2%;
    background: thistle;
    justify-content: space-between;
}
section ~ p {
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    background: lavender;
}
</style>
</head>
<body>
<div id="parent">
<img src="https://i.picsum.photos/id/616/200/200.jpg?hmac=QEzyEzU6nVn4d_vdALhsT9UAtTU
EVhwrT-kM5ogBqKM" />
<div>
<p>Random text 1</p>
<section><p>Some text in section</p></section>
<span>hello</span>
<p>Selected</p>
</div>
<img src="https://i.picsum.photos/id/1035/200/200.jpg?hmac=IDuYUZQ_7a6h4pQU2k7p2nxTMjMt4uy-p3ze94KtA4" />
</div>
</body>
</html>

出力結果

上記のコードを実行すると、次のような結果が表示されます。

CSSで兄弟要素を選択する方法｜隣接兄弟セレクタ（+）と一般兄弟セレクタ（~）の違いを解説

この例では、section ~ p によって、section 要素より後ろに存在する同じ親の p 要素すべてにスタイルが適用されます。直後に隣接していなくても選択されるため、隣接兄弟結合子（+）との大きな違いとなっています。

まとめ

  • 隣接兄弟結合子（+）：直後に隣接する兄弟要素のみを選択する
  • 一般兄弟結合子（~）：後ろに存在する同じ親の兄弟要素をすべて選択する

どちらの結合子も、HTMLの構造を変更せずに特定の要素へスタイルを適用できる便利な機能です。要素同士の位置関係に応じて適切に使い分けることで、より柔軟なスタイリングが可能になります。

  1. CSSでレスポンシブなフローティング要素を作成する方法【初心者向け解説】

    CSSでレスポンシブ対応のフローティング（回り込み）要素を作成するには、float プロパティと @media（メディアクエリ）を組み合わせます。これにより、画面幅に応じて要素の左右配置を動的に切り替えることができます。 サンプルコード 以下のコードは、画面サイズに応じてfloatの方向が入れ替わるレスポンシブなレイアウトの実装例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale

  2. CSSで子要素を選択する方法｜子結合子と子孫結合子の違いを解説

    CSSの子結合子（child combinator）は、親要素の直下にある子要素のみを選択するために使用します。記号「>」を用いて表現します。子結合子の基本的な構文は以下の通りです。セレクタ > セレクタ { プロパティ: /*値*/; }一方、子孫結合子（descendant combinator）は、親要素に含まれるすべての子孫要素（子・孫・ひ孫など、階層の深さに関係なく）を選択します。セレクタ同士を半角スペースで区切って記述します。子孫結合子の基本的な構文は以下の通りです。セレクタ セレクタ { プロパティ: /*値*/; }使用例1：子結合子の基本的な使い方