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 elements that are directly after a h2 element in the DOM. Thus, the following p element would be styled:

A heading
This paragraph will be styled.

But this wouldn't:

A heading

This paragraph will NOT be styled.

And neither would this:

This paragraph will NOT be styled.
A heading

...or this:

A heading

    
This paragraph will NOT be styled.