<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");
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.