<h2>In Box</h2>
<div class="box">
  <p class="a">Lorem ipsum a</p>
  <p class="b">Lorem ipsum b</p>
  <p class="c">Lorem ipsum c</p>
  <p class="d">Lorem ipsum d</p>
  <div>
    <p class="c">Lorem ipsum c</p>
  </div>
</div>

<h2>Not in box</h2>
<p class="d">Lorem ipsum a</p>
<p class="c">Lorem ipsum b</p>
<p class="b">Lorem ipsumbc</p>
<p class="a">Lorem ipsum d</p>

/* Selector List 
.a and .c selected */
/* .a, .c {
	color: orange;
} */


/* Descendent
only c in box selected */
/* .box .c {
	color: orange;
}
 */


/* Child
only c in box selected */
/* .box > .c {
	color: orange;
} */

/* General Sibling
only c that is sibling of a */
/* .a ~ .c {
	color: orange;
} */

/* Adjacent Sibling
only c that is the next sibling of b */
.b + .c {
	color: orange;
}