Dúvida em relação as teclas no html

Então João, é por causa que quando você usa o querySelector, ele irá procurar no html o primeiro elemento que possue o valor especificado nas aspas(tag, classe ou id), então para diferenciar se o que você procura é uma classe, id, etc, voce precisa especificar como se fosse no css.

Por exemplo:

// classe no css
.nome {

}

// classe no querySelector
// Irá retornar o primeiro elemento que possuir a classe nome
document.querySelector('.nome');

Mas na hora de usar no html voce nao precisa definir o ponto, e o espaço é usado para separar as classes, por exemplo, uma tag pode ter mais de uma classe

// Essa tag possui uma cor vermelha
<div class="vermelho"></div>

// Essa tag possui uma cor vermelha e um fundo transparente
<div class="vermelho fundo-transparente"></div>

Se ainda possui duvida é so perguntar. :)

acredito que entendi! kkkkkk, então quando ela escreveu:

class="tecla tecla_pom"

ela criou duas classes, a classe tecla e a tecla_pom ?

EXATAMENTE!!!

show!, obrigado pela explicação mano, esclareceu demais!