Solution 1 :

Yes, you can do this with CSS by adding/removing a class from whatever container has all of these h2s in it (body if there’s nothing closer). Define classes for the colors you want with h2 as a descendant, e.g.:

.some-category h2 {
    color: whatever;
.another-category h2 {
    color: something;

…and then based on the calcuation you’re doing, add/remove some-category, another-category, etc. from the container.

Live Example:

const categories = [
let i = 0;
setInterval(() => {
    const container = document.getElementById("container");
    for (const cat of categories) {
        categories[i % categories.length]
}, 800);
.some-category h2 {
    color: blue;
.another-category h2 {
    color: green;
.yet-another-category h2 {
    color: red;
<h2>I'm not in the container.</h2>
<div id="container">
    <h2>I'm an <code>h2</code> in the container.</h2>
    <p>I'm in the container but not an <code>h2</code></p>
    <h2>I'm another <code>h2</code> in the container.</h2>
    <h2>So am I.</h2>
    <p>I'm in the container but not an <code>h2</code></p>

Problem :

I have multiple h2 enclosed lines of text. The h2 color is specified in the style section. I am changing backgrounds and, because of contrast issues, also need to change the text when the transition background script int++ in the while loop hits a certain value of if int===. The ‘h2’ lines are contained in some HTML5 nested ‘divs’. I have tried attaching color to the ‘div’ ‘id’s but failed there and have since moved on successfully, but with potentially massive overhead as a generic solution, to setting a class="forColorChange" in each h2 tag. However, with multiple lines of text it gets tedious to write out and access each one individually. Is there a code line of JavaScript that basically says in a batch efficiency, turn every ‘h2’ or, everything class tagged with forColorChange, from (the style section) color: Green to in one swoop, ‘color:Orange’? My copy and paste runnable HTML5 skeletal stub is in the code section below.

<!doctype html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="author" content=""/>
<title>Change Font Color of Multiple <code><H2></code> Lines</title>
<!-- <link rel="stylesheet" type="text/css" href="./CSS-MasterStyle2019.css"/> -->
div#masterPoetryBlockDiv { }      
main#mainStyle { }
article#articleStyle { }
.general-formatting-1 { text-indent:5em; }
.general-formatting-2 { text-indent:10em; }
.forColorChange { } 

h1 { text-shadow: 1px 0px 1px Purple, 2px -1px 2px Gray;
h2 {/* text-shadow: 1px 0px 1px Purple, 2px -1px 2px Gray; */
body, #b0 { 
background-color: RGB(190, 181, 168) ; 
background-image: url('./Your-0.jpg') ; 
position: relative ; 
z-index: -2 ; 
background-position: center top ; 
background-repeat: no-repeat ; 
background-attachment: fixed ;  
background-size: cover ;  
transition: background 0ms ease-in-out 400ms; 
#b1 { 
background-color: DarkGray ; 
background-image: url('./Your-1.jpg') ; 
position: relative ; 
z-index: -2 ; 
background-position: center top ; 
background-repeat: no-repeat ; 
background-attachment: fixed ; 
background-size: cover ;  
transition: background 500ms ease-in-out 400ms;
#b2 { 
background-color: rgb(46, 46, 46) ; 
background-image: url('./Your-2.jpg') ; 
position: relative ; 
z-index: -2 ; 
background-position: center top ; 
background-repeat: no-repeat ; 
background-attachment: fixed ;  
background-size: cover ;  
  transition: background 500ms ease-in-out 0ms; 
var int = 0;
function shiftbackgrd(interval, frames)
{"use strict";
var swap = window.setInterval(IncrementCuckooBkgrnds, interval);
    function IncrementCuckooBkgrnds()
    if(int === 2 ) {clearInterval(swap);}

        while (int !== 2 )
   = "b"+int;

/* Asking the question for an easier BATCH type color change of all Tag '<h2>' (or by class 'forColorChange') and do away with the heavy overhead within the 'ifs' below where every individual line, albeit successful, is being accessed. It is definitely not good for a large number of lines or a high int count.*/
var colorCall = ["Red", "SkyBlue"];
const changeColor = document.getElementsByClassName("forColorChange");
if(int === 1) {
changeColor[0].style.color = colorCall[0];
changeColor[1].style.color = colorCall[0];
changeColor[2].style.color = colorCall[0];
changeColor[3].style.color = colorCall[0];
changeColor[4].style.color = colorCall[0];
changeColor[5].style.color = colorCall[0];
changeColor[6].style.color = colorCall[0];
if(int === 2) {
changeColor[0].style.color = colorCall[1];
changeColor[1].style.color = colorCall[1];
changeColor[2].style.color = colorCall[1];
changeColor[3].style.color = colorCall[1];
changeColor[4].style.color = colorCall[1];
changeColor[5].style.color = colorCall[1];
changeColor[6].style.color = colorCall[1];
            if(int !== 2 ) {break;}
shiftbackgrd(2400, 3); //milliseconds, frames
<div id="masterPoetryBlockDiv">
<main id="mainStyle">
<article id="articleStyle">
<br/><h1 class="general-formatting-1">Cuckoo Clock Schematics</h1><br/>
<h2 class="forColorChange general-formatting-1">Most times</h2>
<h2 class="forColorChange general-formatting-2">one's cuckoo clock</h2>
<h2 class="forColorChange general-formatting-2">interpretation of reality,</h2>
<h2 class="forColorChange general-formatting-1">Is bigger</h2>
<h2 class="forColorChange general-formatting-2">than one's ability</h2>
<h2 class="forColorChange general-formatting-2">to comprehend</h2>
<h2 class="forColorChange general-formatting-2">its workings.</h2>


Comment posted by How to get element by class name?

Does this answer your question?

Comment posted by GladHeart

Thank you greatly @T.J. Crowder. The question has been closed as unintelligible. I am working on re-asking it and showing my (skeletal) code. I guess simplicity doesn’t always make sense. I am an amateur, situationally taught, novice-intermediate 🙂 when it comes to javascript. Your understanding, attention, answer and, code was first class. It is a great working solution. I have yet to apply it to my iterations but is obviously the solution. When I have merged your code and fathomed the ‘(const cat of categories)’ line, I will post the result and gratefully mark you solution as the answer.

Comment posted by GladHeart

Excellent working answer. Thank you @T.J. Crowder!!