<p class="lightsalmon">Light Salmon</p>

<div class="plum">
	<p>Plum</p>
	<p class="lightsalmon">
		Light Salmon inside Plum
		<span aria-label="Combinator styles are applied">✔</span>
	</p>
	<div class="seashell">
		<p>Sea Shell inside Plum</p>
		<p class="lightsalmon">Light Salmon inside Sea Shell</p>
	</div>
	<p class="lightsalmon">
		Light Salmon inside Plum
		<span aria-label="Combinator styles are applied">✔</span>
	</p>
</div>

<p class="lightsalmon">Light Salmon after Plum</p>

.plum {
	background-color: plum;
}

.lightsalmon {
	background-color: lightsalmon;
}

 .plum > .lightsalmon {
	background-color: mediumturquoise;
}

.seashell {
  background-color: seashell;
}

p {
	font-family: sans-serif;
	font-size: 0.875rem;
	padding: 0.75rem;
}

span {
	float: right;
}

div {
	border: 3px solid #222;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.