Olá Vander, boa noite!!
*Identificando do Problema: *
De acordo com a sua pergunta, você quer saber porque na hora de selecionar o elemento, o docente usou a seleção ".tecla_pom" e não "tecla tecla_pom" que o que esta definido na class desse elemento. Vamos lá
*Solução do Problema: *
A seleção do docente esta correta, mas por que? Na hora de declarar uma classe em um elemento, você tem a possibilidade de colocar uma classe ou varias classes para referenciar a um único elemento. Mas como adiciona várias classes a um único elemento? desse jeito:
// Um elemento pode ter uma classe -->
<button class="tecla">Pom<button>
// E para adicionar outra classe ao mesmo elemento, adicione um espaço e em seguida coloque o nome da nova classe -->
<button class="tecla tecla_pom">Pom<button>
// No exemplo acima, ele tem a classe "tecla" e "tecla_pom". Com isso, você pode selecionar ele através dos 2 nomes -->
document.querySelector(".tecla")
// ou
document.querySelector(".tecla_pom")
// e também desse jeito:
document.querySelector(".tecla.tecla_pom") // isso quer dizer que ele vai selecionar um elemento com a classe .tecla, mas que esse mesmo elemento tenha a classe ".tecla_pom"
*Conclusão: *
Se você perceber, a 1 classe ".tecla" é um nome mais genérico (nele você usaria para referencia a elementos que vão ser um tecla), mas a classe ".tecla_pom" é mais especifico a um elemento (esse você usaria para referencia a uma tecla especifica, que é a "pom").
*Despedida: *
Se a sua dúvida foi resolvida, não se esqueça de colocar a questão como resolvida, pois assim as pessoas que tiverem o mesmo problema que você, saberam que a sua pergunta foi resolvida e clicaram nela para saber como resolver.
Tenha um bom estudo!!