Dúvida sobre a classe .tecla

Olá, tudo bem ? O meu código funcionou corretamente, porém eu tenho uma dúvida. O código funcionou quando chamamos a classe ".tecla_pom", porém ao verificar a classe no html, ela consta como ".tecla tecla_pom". Como que funcionou sendo que o nome da classe é diferente do nome que chamei na função ? Abraços.

    <button class="tecla tecla_puff">Puff</button>
    <button class="tecla tecla_splash">Splash</button>
    <button class="tecla tecla_toim">Toim</button>

    <button class="tecla tecla_psh">Psh</button>
    <button class="tecla tecla_tic">Tic</button>
    <button class="tecla tecla_tom">Tom</button>
</section>
*
-***-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
function tocaSomPom() {
document.querySelector('#som_tecla_pom').play();

}

document.querySelector('.tecla_pom').onclick = tocaSomPom;