<ul class="my-class">
  <li class="find-siblings">All of my siblings turned red, <em> but my child</em><strong>ren didn't!</strong></li>
<ul class="my-class">
  <li><a><span>Sixth</span> <em>Sixth</em> <span >Sixth</span></a></li>
  <li class="find-siblings"><a>Seventh</a></li>
html {
  background: #fbdf00;
  font-size: 20px;
// selects only the first '.find-siblings' element
let item = document.querySelector('.find-siblings');

// :scope is necessary for preventing the child elements of 'item' from being selected
// see what happens to the text when you remove ':scope >'
let siblings = item.parentNode.querySelectorAll(':scope > :not(.find-siblings)');

// loop through the siblings
for (let i = 0; i < siblings.length; i++) {
    siblings[i].style.color = 'red';

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.