What does + mean in CSS?

Question

What does the + in this CSS rule mean?

h2 + p { 
  font-size: 1.4em; 
  font-weight: bold;
  color: #777; 
} 

Answer 1

it selects all P tags that are directly beside an h2 tag. Then gives it the said attributes.

Answer 2

+ is the adjacent sibling selector.

This only selects the <p> that comes immediately after an <h2>.

An illustration:

<h2>Headline!</h2>
<p>The first paragraph.</p>  <!-- Selected [1] -->
<p>The second paragraph.</p> <!-- Not selected [2] -->

<h2>Another headline!</h2>
<blockquote>
    <p>A quotation.</p>      <!-- Not selected [3] -->
</blockquote>

Footnotes:

1. Selected as it comes right after the <h2>.
2. Not selected as it comes right after the first <p> as opposed to the <h2>.
3. Not selected as it's within a <blockquote> and there's no <h2> before it inside the quote

Answer 3

It selects all p elements that are directly after a h2 element in the DOM. Thus, the following p element would be styled:

<h2>A heading</h2>
<p>This paragraph will be styled.</p>

But this wouldn't:

<h2>A heading</h2>
<hr>
<p>This paragraph will NOT be styled.</p>

And neither would this:

<p>This paragraph will NOT be styled.</p>
<h2>A heading</h2>

...or this:

<h2>A heading</h2>
<section>
    <p>This paragraph will NOT be styled.</p>
</section>