Замена класса текущему элементу при нажатии

Question

При клике на блок main, он должен поменять свой класс на second,

то есть должен поменяться размер шрифта и цвет фона.

let a = document.querySelector('.main');

a.onclick = function(){
// код
}

.main{
background:orange;
}


.second{
font-size:23px;
background: red;
}

<div class ="main">
Жил был кот и умер.
</div>

Answer 1

let a = document.querySelector('.main');

a.onclick = function(){
a.classList.toggle('second');
}

.main{
background:orange;
}


.second{
font-size:23px;
background: red;
}

<div class ="main">
Жил был кот и умер.
</div>

Если не нужно переключать обратно по следующему клику - то

a.classList.remove('main');
a.classList.add('second');

Answer 2

При помощи псевдокласса :focus.

Но для его работы с <div> необходимо добавить tabindex="0", вот так:

<div class="ex" tabindex="0">Hello everyone</div>

.ex{
  background:orange;
}

.ex:focus{
  font-size:23px;
  background: red;
}