Caution

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

CSS辞典

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

【CSSセレクタ】E + F

『+』(プラス)を使用すると、指定された要素の隣接した弟要素のみに適用できます。注意点として、この記法は『隣接セレクタ』とか『隣接兄弟セレクタ』と呼ばれているにも関わらず、隣接した兄要素には反映されません。あくまでも自身の次に存在している弟要素のみの反映となります。あとIE6以下では動きませんのでご注意ください。

サンプルコード

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

ブラウザでの表示結果

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

<p>ここはp要素です。h2要素の手前にいるので赤字になりません。</p>
<h2>ここはh2要素です。</h2>
<p>ここはp要素です。</p>
<p>ここはp要素です。</p>

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

全バージョンで対応しています

11 ○

10 ○

9 ○

8 ○

7 ○

6 ×

Opera

3.5 以降 ○

2 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android