querySelectorAll

by kmouse

HTML

<div  id="X" class="hello"></div>
	<span id="Y" class="world"></span>
	<div  id="Z" class="hello world">
	
	</div>
	<div  id="P" class="parent">
		<h1 id="A">
		A
		</h1>
		<p  id="B" unit="m">
		B
		</p>
		<p  id="C">
		C
		</p>
		<p  id="D"> D <span id="D0">D0</span><span id="D1">D1</span> </p>
		<h3 id="E">
		E
		</h3>
		<p  id="F">F <span id="F0">F0</span> </p>
		<p  id="G">
		G
		</p>
		<p  id="H" class="hello">
		H
		</p>
	</div>
	<input id="I" type="checkbox" checked>
	
<div id="result"></div>

CSS

body {background: #ccc; }

/*#P > :nth-child(3) { color: #fff; }


#P > :not(#P > :nth-child(3)) { color: #aa0; }*/

p[ unit = "m" ] { color: #aa0; }

JavaScript

var correctElements = document.querySelectorAll('body > * span:first-child');

document.getElementById('result').innerHTML = Array.from(correctElements).reduce((acc,curr) => acc+' '+curr.id, '');