Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

CSS辞典

トップページ
CSS辞典
【CSSセレクタ】E ~ F

【CSSセレクタ】E ~ F

『~』(チルダ)を使用すると弟要素全てに適用できます。一般に『間接セレクタ』と呼ばれます。条件としては同じ親要素を持ち、自身より後続している要素に適用される、といった感じです。IE6以下では動きませんのでご注意ください。

サンプルコード

style.css

/* h2の後続兄弟にあたるp要素すべてに適用 */
h2 ~ p { color: red;}

/* フォームが無効化されたラベルをグレーに */
input:disabled ~ label { color: #999;}

/* チェックボックスがオンのとき関連コンテンツを表示 */
input[type="checkbox"]:checked ~ .menu { display: block;}

/* 特定要素の後続兄弟すべてにmarginを追加 */
.divider ~ * { margin-top: 24px;}

ブラウザでの表示結果

h2 ~ p { color: red;} /* h2要素の弟要素のp要素全てに適用されます。 */

<p>ここはp要素です。</p>
<h2>ここはh2要素です。</h2>
<p>ここはp要素です。</p>
<p>ここはp要素です。</p>

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

3 以降 ○

2 以前 ×

Edge

12 以降 ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ×

Opera

9 以降 ○

8 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android