<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.