<div class="parent">
<div>1.11</div>
<div>1.98</div>
<div>2</div>
<div>2.01</div>
<div>text</div>
<div>3.20</div>
<div>prodigi</div>
<div>1.40</div>
</div>
.NAN {
display: none;
}
.small {
color: red;
border: 1px solid red;
}
.big {
color: green;
border: 1px solid green;
}
.parent {
display: flex;
gap: 4px;
}
.parent div {
padding: 4px 7px;
}
document.querySelectorAll(".parent div").forEach(function (el) {
let num = Number(el.textContent);
function isNumber(num) {
return typeof num === "number" && !isNaN(num);
}
if (num >= 2) {
el.classList.add("big");
} else {
el.classList.add("small");
}
if (!isNumber(num)) {
el.classList.add("NAN");
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.