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"?
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>