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