CSSの隣接セレクタ（全兄弟セレクタ）

隣接セレクタ（全兄弟セレクタ） ~ は、 同一の親要素内で、指定された要素の後に位置する 全ての要素を選択することを可能にします。

構文

cssセレクタ1 ~ セレクタ2 {
  
}

例

h2 タグの後に位置する全ての p タグに アクセスして、それらを赤色に着色してみましょう：

html<div>
  <h2>text</h2>
  <p>
    +
  </p>
  <p>
    +
  </p>
  <p>
    +
  </p>
</div>
<p>
  -
</p>

cssh2 ~ p {
  color: red;
}

Результат:

例

クラス .test を持つ要素の後に位置する 全ての p タグにアクセスして、 それらを赤色に着色してみましょう：

html<div>
  <p class="test">
    text
  </p>
  <p>
    +
  </p>
  <p>
    +
  </p>
</div>
<p>
  -
</p>

css.test ~ p {
  color: red;
}

Результат:

例

クラス .test を持つ要素の後に位置する 全てのクラス .elem を持つ要素にアクセスして、 それらを赤色に着色してみましょう：

html<div>
  <p class="test">
    text
  </p>
  <p class="elem">
    +
  </p>
  <p>
    -
  </p>
  <p class="elem">
    +
  </p>
</div>
<p>
  -
</p>

css.test ~ .elem {
  color: red;
}

Результат:

関連項目