html – Why is the second element with the same id being painted?

Question:

I put the same id on two elements. Why is the second one being painted?

#red {
  color: red;
}
<span id="red"> red </span> no red <span id="red"> red </span>

Answer:

In the case of CSS, id behaves like a class, but in JavaScript it will only apply to the first element:

document.getElementById("red").style.color = "red";
<span id="red"> red </span> no red <span id="red"> red </span>
Scroll to Top