querySelectorAll selects all similar classes

Calendar is using 3 different classes to style its child elements: “old day”, “day”, “new day”. Trying to querySelectorAll element with class name “day” also captures the other two classes, so when i say something like:

t = document.getElementByTagName('table');
d = t.item(0).querySelectorAll('.day');
/* also selects td.new.day and td.old.day */

for (i = 0; i < d.length: i ++) {
     if(d[i].textContent == 28) {
         d[i].click();
     }
}

I will get click on old 28th instead of current month 28th.

How do i select “day” class of td element without also selecting “old day” and “new day”?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can use :not to specify which classes you don’t want to match.

document.querySelectorAll(".red:not(.big):not(.small)").forEach(e => {
  e.style.marginLeft = "100px";
});

.red {color: red;}
.big {font-size: 20px}
.small {font-size: 12px}

<a class="red">red</a><br>
<a class="red big">red big</a><br>
<a class="red small">red small</a>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0