CSS Combinator: adjacent sibling selector (+)

It selects all elements that are placed immediately after a specified element.

"adjacent" means "immediately following"
"siblings" means "brother or sister"

In case before:

<div class="a">
<p>Paragraph a in the div.</p>
     <div class="a-a">
     <p>Paragraph a-a in the div.</p>
     </div>   
     <div class="a-b">
     <p>Paragraph a-b in the div.</p>
     </div>
     <div class="a-c">
     <p>Paragraph a-c in the div.</p>
     </div>
</div>

to select "a-b" class, the rule is:

.a-a + .a-b { 
}

An example:

<div class="a">
<p>Paragraph a in the div.</p>
     <div class="a-a">
     <p>Paragraph a-a in the div.</p>
     </div>
     <div class="a-b">
     <p>Paragraph a-b in the div.</p>
           <div class="a-b-a">
            <p>Paragraph a-b-a in the div.</p>
                  <div class="a-b-a-a">
                  <p>Paragraph a-b-a-a in the div.</p>
                  </div>
          </div>
     </div>
     <div class="a-c">
     <p>Paragraph a-c in the div.</p>
     </div>
</div>
<div class="a">
<p>Paragraph a in the div.</p>
     <div class="a-a">
     <p>Paragraph a-a in the div.</p>
     </div> 
     <div class="a-b">
     <p>Paragraph a-a in the div.</p>
     </div> 
     <div class="a-b">
     <p>Paragraph a-b in the div.</p>
          <div class="a-b-a">
          <p>Paragraph a-b-a in the div.</p>
                <div class="a-b-a-a">
                <p>Paragraph a-b-a-a in the div.</p>
                </div>
         </div>
     </div>
     <div class="a-c">
     <p>Paragraph a-c in the div.</p>
     </div>
</div>

If I declare:

.a .a-a + .a-b .a-b-a-a {
    background-color: yellow;
}

the result is:
 
where is visibile that only first a-b-a-a paragraph is yellow background because a-b-a-a paragraph is "immediately following" and "sibling" of a-a paragraph.