E要素の直後の F要素に対してスタイルが適用されます。（隣接兄弟の組み合わせ） 隣接の兄弟結合子は、２つのセレクタの間にプラス記号 ( U+002B、+ ) を入れて表します。 同じ親要素をもつ兄弟要素のうち、直後に表示される弟要素にスタイルが適用されます。

h1 + p

h1 要素の直後の p 要素を表しています。

h1.bar + p

bar クラスをもつ h1 要素の直後の p 要素を表しています。

example

h1 + p { border: 3px dotted pink; }
h1.bar + p { border: 3px dashed skyblue; }

source

<h1> h1 要素 </h1>
<p> h1 要素の直後の p 要素 </p>
<p> 直後ではない p 要素 </p>

<h1 class="bar"> bar クラスをもつ h1 要素 </h1>
<p> bar クラスをもつ h1 要素の直後の p 要素 </p>

display

※ E、F、bar など斜体は仮の名前です。