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

+ is the adjacent sibling combinator.

That means the selector h2 + p only selects the p that comes immediately after an h2.

An illustration:

Headline!
The first paragraph.
  
The second paragraph.
 

Another headline!

    
A quotation.
      

What's selected and what's not:

1. Selected
   This p comes right after the first h2.

2. Not selected
   This p occurs after the first p as opposed to the h2. Since it doesn't immediately follow the h2, it's not selected.

   However, since it still follows the h2 element, just not immediately, the selector h2 + p won't match this element, but h2 ~ p will, using the general sibling combinator instead.

3. Not selected
   This p is located within a blockquote, and there's no h2 before it inside the quote to satisfy its selector.