<ul class='my-class'>
  <li><span>Hi</span><a>First</a><em>Bye</em></li>
  <li><a><em>Second</em></a><span>Hi</span></li>
  <li><a><span>Third</span></a></li>
    <li><a><span>Fourth</span></a></li>
</ul>
<ul class='my-class second'>
  <li><a><span>First</span></a></li>
  <li><a><em>Second <span>Second</span>  Second</em></a></li>
  <li><a>Third</a></li>
  <li><a>Fourth</a></li>
</ul>
html {
  background: #fbdf00;
  font-size: 20px;
}
let items = document.querySelectorAll('.my-class a');
 
// loops through all the elements with the .my-class
for (let i = 0; i < items.length; i++) {
    	
		// finds the children of the current .my-class
		let kids = items[i].children;
	
		for (let j = 0; j < kids.length; j++) {
		  
      if (kids[j].tagName == 'SPAN') {
        
			      kids[j].style.color = 'blue';
      
      }
		
		}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.