Si le da un color a un padre, los hijos también lo heredarán, de forma predeterminada. Su código está seleccionando solo los padres, los .h s, como desee; el problema es que los hijos también heredan ese estilo.

Una opción es iterar sobre los <p> secundarios o descendientes también, y cambiar sus colores a lo que desee, para que no hereden del padre.

 document.querySelectorAll(".h").forEach(function(e){ e.style.color = "red"; }); document.querySelectorAll(".h .p").forEach(function(e){ e.style.color = "initial"; });

 <div class="h"> Hello World! <p class="p">This is a paragraph.</p> </div> <div class="h"> Hello World! <p class="p">This is a paragraph.</p> </div> <div class="h"> Hello World! <p class="p">This is a paragraph.</p> </div>

Una opción más atractiva sería darle al texto que se va a colorear su propio elemento y luego seleccionar solo esos elementos:

 document.querySelectorAll(".h span").forEach(function(e){ e.style.color = "red"; });

 <div class="h"> <span>Hello World!</span> <p class="p">This is a paragraph.</p> </div> <div class="h"> <span>Hello World!</span> <p class="p">This is a paragraph.</p> </div> <div class="h"> <span>Hello World!</span> <p class="p">This is a paragraph.</p> </div>

Esto es solo seleccionar los elementos .h :

 document.querySelectorAll(".h")

Pero, ¿qué estás haciendo con esos elementos? Estás configurando el color del texto en rojo:

 e.style.color = "red";

Por lo tanto, todo el texto dentro de esos elementos será red , a menos que tenga un estilo diferente. Si los elementos .p deberían ser otra cosa, diseñelos como tales:

 document.querySelectorAll(".h").forEach(function(e){ e.style.color = "red"; });

 .p { color: black; }

 <div class="h"> Hello World! <p class="p">This is a paragraph.</p> </div> <div class="h"> Hello World! <p class="p">This is a paragraph.</p> </div> <div class="h"> Hello World! <p class="p">This is a paragraph.</p> </div>

Alternativamente, podría considerar reestructurar su HTML. Por ejemplo:

 <div> <span class="h">Hello World!</span> <p class="p">This is a paragraph.</p> </div> <div> <span class="h">Hello World!</span> <p class="p">This is a paragraph.</p> </div> <div> <span class="h">Hello World!</span> <p class="p">This is a paragraph.</p> </div>

Luego, puede orientar específicamente el contenido que desea sin tener que buscar formas de "excluir" otro contenido.

El color se hereda en el párrafo.

 document.querySelectorAll(".h:not(.p)").forEach(function(e){ e.style.color = "red"; e.querySelectorAll(".p").forEach(function(elem) { elem.style.color = "black"; }); });