Caution

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

CSS辞典

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

【CSSセレクタ】E + F

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

サンプルコード

style.css

/* h2の直後にあるp要素のみ赤文字にする */
h2 + p { color: red;}

/* ラベルの直後にある入力欄のスタイルを変える */
label + input { border: 2px solid #0077cc; padding: 4px 8px;}

/* liの直後にあるliの上に区切り線を引く */
li + li { border-top: 1px solid #ddd; padding-top: 8px; margin-top: 8px;}

/* 段落の後に続く段落にインデントをつける */
p + p { text-indent: 1em;}

/* 見出しの直後の段落だけ太字 */
h3 + p { font-weight: bold;}

ブラウザでの表示結果

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