$('.catalog-close').click(function(event){
event.stopPropagation();
$(this).parents('.catalog-panel.first').hide();
});
$('.back').click(function(event){
event.stopPropagation();
$(this).closest('.catalog-panel').hide();
});document.addEventListener("DOMContentLoaded", function(){
Ваш код
});<div class="header-home">Hello</div>
<div class="header-home page">Hello</div>.header-home {
fonxt-size: 20px;
}
.header-home a {
color: red;
}
.header-home.page {
fonxt-size: 10px;
}
.header-home.page a {
color: green;
}
scss
.header-home {
fonxt-size: 20px;
a {
color: red;
}
&.page {
fonxt-size: 10px;
a {
color: green;
}
}
}для аудио тоже самое будет - <audio id="fon" src="audio/fon-1.mp3" preload="auto"></audio><video id="fon">
<source src="video.mp4" type="video/mp4">
</video>
<div class="btn-ok">Click Play</div>
<div class="btn-stop">Click Stop</div>const btnOk = document.querySelector('.btn-ok');
const btnStop = document.querySelector('.btn-stop');
const wrapperVideo = document.getElementById('fon');
btnOk.addEventListener('click',function(){
wrapperVideo.play();
});
btnStop.addEventListener('click',function(){
wrapperVideo.pause();
});.block{
&:after { content: "hello"; }
&.clicked:after { color: red; } // добавляете clicked и просто новыми стилями перебиваете старые)
}