Duda sobre --invalid

.input-container--invalid {
  margin-bottom: 0.5rem;
}

.input-container--invalid .input {
  border: 1px solid var(--warning-color);
  border-radius: 7px;
}

.input-container--invalid .input-label {
  color: var(--warning-color);
}

.input-message-error {
  display: none;
}

No logro comprender una parte del ejercicio. Si hay un error en el input, se le agrega la clase .input-container--invalid al "padre" del input, que en este caso en un div, y el mensaje conrrespondiente al span. Pero no logro comprender como el span cambia de display: none a que se vea.

if(input.validity.valid){
        input.parentElement.classList.remove("input-container--invalid");
        input.parentElement.querySelector(".input-message-error").innerHTML = "";
    }else{
        input.parentElement.classList.add("input-container--invalid");
        input.parentElement.querySelector(".input-message-error").innerHTML = mostrarMensajeError(tipoDeInput, input);
    }
}

este es el html:

<div class="input-container">
                        <input name="email" id="email" class="input" type="email" placeholder="Email" required data-tipo="email">
                        <label class="input-label" for="email">Email</label>
                        <span class="input-message-error">Este campo no es valido</span>
                    </div>

Cuando salgo del input ("blur"), capturo el input y con el input.target obtengo que objeto que es. Si el input.validity.valid es falso, paso a buscar el tipo de error, le agrego la clase .input-container--invalid al padre del input (el div) y agrego el texto del error al span. Pero no logro comprender, como solo agregando la clase .input-container--invalid al padre del input , el span pasa de display:none a verse.

Gracias!!