後続兄弟結合子 / 後方セレクター - CSS内の"~"の意味が分からない - CSS

後続兄弟結合子 / 後方セレクターの紹介です。

概要

指定したタグやクラスの後ろに配置したタグやクラスのスタイルを指定する場合に、後続兄弟結合子 / 後方セレクターを利用できます。

書式

(セレクター1) ~ (セレクター2) {
 [スタイル]
}

(セレクター1) の後に(セレクター2) がある場合に(セレクター2)に[スタイル]を適用します。
(セレクター2)は(セレクター1)の直後である必要はありませんが、同じ親のタグ内である必要があります。

例1

コード

以下のHTMLファイルとCSSのコードを記述します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" type="text/css" href="GeneralSiblingSelector.css" />
</head>
<body>

  <h1>General Sibling Combinator のデモ</h1>
  <section>
    <div class="Frame01">コンテンツ1です。</div>
    <div class="Frame02">コンテンツ2です。</div>
  </section>
  <section>
    <div class="Frame03">コンテンツ3です。</div>
    <div class="Frame02">コンテンツ2です。</div>
  </section>

</body>
</html>

GeneralSiblingSelector.css

.Frame01 {
  border:1px solid #ff6a00;
}

.Frame02 {
margin:1rem 0 2rem 0;
}

.Frame03 {
  border: 1px solid #0094ff;
}

.Frame01 ~ .Frame02 {
  background-color:#ffed8a;
}

解説

.Frame01 クラスの後にある .Frame02 クラスの場合に背景色を黄色に設定します。
　

.Frame01 ~ .Frame02 {
  background-color:#ffed8a;
}

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
.Frame01の後ろにある、.Frame02 の背景色が黄色になっていますが、 .Frame03の後ろにある、.Frame02 の背景色は変化していないことが確認できます。

補足

以下のコードの場合(親のタグがdivやarticle)も同様の結果になります。

  <h1>General Sibling Combinator のデモ</h1>
  <div>
    <div class="Frame01">コンテンツ1です。</div>
    <div class="Frame02">コンテンツ2です。</div>
  </div>
  <div>
    <div class="Frame03">コンテンツ3です。</div>
    <div class="Frame02">コンテンツ2です。</div>
  </div>

  <h1>General Sibling Combinator のデモ</h1>
  <article>
    <div class="Frame01">コンテンツ1です。</div>
    <div class="Frame02">コンテンツ2です。</div>
  </article>
  <article>
    <div class="Frame03">コンテンツ3です。</div>
    <div class="Frame02">コンテンツ2です。</div>
  </article>

しかし、<p>タグの場合は、同じ親ノードと判定され、下のFrame02の要素の背景色も黄色になります。

  <h1>General Sibling Combinator のデモ</h1>
  <p>
    <div class="Frame01">コンテンツ1です。</div>
    <div class="Frame02">コンテンツ2です。</div>
  </p>
  <p>
    <div class="Frame03">コンテンツ3です。</div>
    <div class="Frame02">コンテンツ2です。</div>
  </p>

例2:同じノード内にある場合

同じ親ノード内にある場合の動作を確認します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" type="text/css" href="GeneralSiblingSelectorFlat.css" />
</head>
<body>
  <h1>General Sibling Combinator のデモ</h1>
  <p>
    <div class="Frame01">コンテンツ1です。</div>
    <div class="Frame02">コンテンツ2です。</div>
    <div class="Frame03">コンテンツ3です。</div>
    <div class="Frame02">コンテンツ2です。</div>
  </p>
</body>
</html>

GeneralSiblingSelectorFlat.css

.Frame01 {
  border:1px solid #ff6a00;
}

.Frame02 {
margin:1rem 0 2rem 0;
}

.Frame03 {
  border: 1px solid #0094ff;
}

.Frame01 ~ .Frame02 {
  background-color:#ffed8a;
}

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
親が同じタグの場合は、どちらのFreame2の要素もFrame01の後に配置されているため、背景が黄色になります。

なお、タグの順番を以下の状態に入れ替えた場合は、最初のFrame02の要素はFrame01の後ではないため、背景色は黄色になりません。

  <p>
    <div class="Frame03">コンテンツ3です。</div>
    <div class="Frame02">コンテンツ2です。</div>
    <div class="Frame01">コンテンツ1です。</div>
    <div class="Frame02">コンテンツ2です。</div>
  </p>

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次

後続兄弟結合子 / 後方セレクター - CSS内の"~"の意味が分からない - CSS

概要

書式

例1

コード

解説

実行結果

補足

例2:同じノード内にある場合

実行結果

関連するページ