Quick css tricks

<div  class="A">
	<span  class="B">one</span>
	<span  class="C">two</span>
	<span  class="B">three</span>
	<span  class="B">four</span>
	<div>
		<span  class="B">five</span>
	</div>
</div>
<span  class="B">six</span>

/* Descendant: all .B elements inside .A */
/* one, three, four, five */
.A .B {
  color: red;
}

/* Child: all .B which are direct childs of .A x*/
/* one, three, four */
.A > .B {
  color: green;
}

/* Adjacent sibling: .B that follows immediately after .C */
/* three but overridden by ~ */
.C + .B {
  color: blue;
}

/* General sibling: all sibling .B that follows after .C */
/* three, four */
.C ~ .B {
  color: orange;
}

<div class="pop-up" template>
	<h1 class="message">This is a pop up message</h1>
	<button>Exit<button/>
</div>

[template] {
	background-color: red;
}

/* or if you wanted to be more specific */

.pop-up[template] {
	background-color: red;
}

document.querySelector('.pop-up[template]');