class style is not working

Question

I'm trying to change the word color which is in class=css to white when I click the 'night' button but it is not working while all the other word color changes as I meant to.

and this is my code

    .css {
      font-weight: bold;
      color: pink;
    }
    #first {
      color: lightblue;
    }
    span {
      font-weight: lighter;
      color: green;
    }

    <input type="button" value="night"
    onclick= "
    document.querySelector('body').style.backgroundColor = 'darkblue';
    document.querySelector('body').style.color = 'yellow';
    document.querySelector('.css').style.color = 'white';
    document.querySelector('#first').style.color = 'orange';
    ">
    <input type="button" value="day"
    onclick ="
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    document.querySelector('.css').style.color = 'pink';
    document.querySelector('#first').style.color = 'lightblue';
    ">
    <h1><a href="index.html">WEB</a></h1>
    <h2 style="background-color:lightblue; color:Tomato;">CSS</h2>
    <span id="first" class="css">CSS</span> is a language that describes the style of an HTML document.
    <span class="css">CSS</span>  describes how <span>HTML</span> elements should be displayed.
    This tutorial will teach you <span class="css">CSS</span>  from basic to advanced.

Answer 1

As other has mentioned, the document.querySelector() will only select one element, the first it finds, the document.querySelectorAll() will find all, still, that is not the best way here.

You should use event listeners instead of inline event handlers, and toggle a class (here done on the body) is much more efficient, and the recommended way, than change inline style.

With that it gets as simple as this.

Stack snippet

document.querySelector('input[value="night"]').addEventListener('click', function() {
  document.querySelector('body').classList.add('night');
});
document.querySelector('input[value="day"]').addEventListener('click', function() {
  document.querySelector('body').classList.remove('night');
});

.css {
  font-weight: bold;
  color: pink;
}

#first {
  color: lightblue;
}

span {
  font-weight: lighter;
  color: green;
}

body.night {
  background-color: darkblue;
  color: yellow;
}

.night .css {
  font-weight: bold;
  color: white;
}

.night #first {
  color: orange;
}

.night span {
  font-weight: lighter;
  color: ;
}

<input type="button" value="night">
<input type="button" value="day">
<h1><a href="index.html">WEB</a></h1>
<h2 style="background-color:lightblue; color:Tomato;">CSS</h2>
<span id="first" class="css">CSS</span> is a language that describes the style of an HTML document.
<span class="css">CSS</span> describes how <span>HTML</span> elements should be displayed. This tutorial will teach you <span class="css">CSS</span> from basic to advanced.

---

And you can do this with only one button

document.querySelector('input[type="button"]').addEventListener('click', function() {
  this.value = (this.value == 'Night') ? 'Day' : 'Night';
  document.querySelector('body').classList.toggle('night');
});

.css {
  font-weight: bold;
  color: pink;
}

#first {
  color: lightblue;
}

span {
  font-weight: lighter;
  color: green;
}

body.night {
  background-color: darkblue;
  color: yellow;
}

.night .css {
  font-weight: bold;
  color: white;
}

.night #first {
  color: orange;
}

.night span {
  font-weight: lighter;
  color: ;
}

<input type="button" value="Night">
<h1><a href="index.html">WEB</a></h1>
<h2 style="background-color:lightblue; color:Tomato;">CSS</h2>
<span id="first" class="css">CSS</span> is a language that describes the style of an HTML document.
<span class="css">CSS</span> describes how <span>HTML</span> elements should be displayed. This tutorial will teach you <span class="css">CSS</span> from basic to advanced.

Answer 2

You are using querySelector when you are targeting multiple elements. Use querySelectorAll instead.

Moreover, I recommand you to separate the css from the js, like below.

function changeCssClassItemsColor(color) {
  const cssItems = document.querySelectorAll('.css');

  cssItems.forEach(function(item) {
    item.style.color = color;
  });
}

function switchToNight() {
  document.querySelector('body').style.backgroundColor = 'darkblue';
  document.querySelector('body').style.color = 'yellow';
  document.querySelector('#first').style.color = 'orange';

  changeCssClassItemsColor('white');
}

function switchToDay() {
  document.querySelector('body').style.backgroundColor = 'white';
  document.querySelector('body').style.color = 'black';
  document.querySelector('#first').style.color = 'lightblue';

  changeCssClassItemsColor('pink');

}

.css {
  font-weight: bold;
  color: pink;
}

#first {
  color: lightblue;
}

span {
  font-weight: lighter;
  color: green;
}

<input type="button" value="night" onclick="switchToNight()">

<input type="button" value="day" onclick="switchToDay()">

<h1><a href="index.html">WEB</a></h1>

<h2 style="background-color:lightblue; color:Tomato;">CSS</h2>

<span id="first" class="css">CSS</span> is a language that describes the style of an HTML document.

<span class="css">CSS</span> describes how <span>HTML</span> elements should be displayed. This tutorial will teach you <span class="css">CSS</span> from basic to advanced.

Answer 3

querySelector only selects a single element, so when you document.querySelector('.css') and assign to its style, you're only changing the style of a single element.

Use querySelectorAll and forEach instead, to iterate over the css elements:

.css {
  font-weight: bold;
  color: pink;
}

#first {
  color: lightblue;
}

span {
  font-weight: lighter;
  color: green;
}

<input type="button" value="night" onclick="
    document.querySelector('body').style.backgroundColor = 'darkblue';
    document.querySelector('body').style.color = 'yellow';
    document.querySelectorAll('.css').forEach(elm => elm.style.color = 'white');
    document.querySelector('#first').style.color = 'orange';
    ">
<input type="button" value="day" onclick="
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    document.querySelectorAll('.css').forEach(elm => elm.style.color = 'pink');
    document.querySelector('#first').style.color = 'lightblue';
    ">
<h1><a href="index.html">WEB</a></h1>
<h2 style="background-color:lightblue; color:Tomato;">CSS</h2>
<span id="first" class="css">CSS</span> is a language that describes the style of an HTML document.
<span class="css">CSS</span> describes how <span>HTML</span> elements should be displayed. This tutorial will teach you <span class="css">CSS</span> from basic to advanced.

But inline handlers are as bad as eval and should be avoided - attach them properly in Javascript, instead, if at all possible:

document.querySelector('input[value="night"]').onclick = () => {
  document.querySelector('body').style.backgroundColor = 'darkblue';
  document.querySelector('body').style.color = 'yellow';
  document.querySelectorAll('.css').forEach(elm => elm.style.color = 'white');
  document.querySelector('#first').style.color = 'orange';
}
document.querySelector('input[value="day"]').onclick = () => {
  document.querySelector('body').style.backgroundColor = 'white';
  document.querySelector('body').style.color = 'black';
  document.querySelectorAll('.css').forEach(elm => elm.style.color = 'pink');
  document.querySelector('#first').style.color = 'lightblue';
}

.css {
  font-weight: bold;
  color: pink;
}

#first {
  color: lightblue;
}

span {
  font-weight: lighter;
  color: green;
}

<input type="button" value="night">
<input type="button" value="day">
<h1><a href="index.html">WEB</a></h1>
<h2 style="background-color:lightblue; color:Tomato;">CSS</h2>
<span id="first" class="css">CSS</span> is a language that describes the style of an HTML document.
<span class="css">CSS</span> describes how <span>HTML</span> elements should be displayed. This tutorial will teach you <span class="css">CSS</span> from basic to advanced.