<article> <section class="menu"> <div>Блок с меню, прижатый вниз</div> </section> <section class="bg"> <h1>Обычный заголовок со стилями</h1> </section> </article>

When you hover over the menu "menu", added styles to the class "bg" filter: blur (2px), transform: scale (1.02) ;. At the same time, the child h1 also picks up the styles of the parent, which is logical. The question is how to cancel the application of these styles to a child element?

  • No, just break them into different ones. In your case, everything that is in .bg I would put in .bg:before - Artem Gorlachev
  • Attach the same working code to the question so that you can clearly see - Grulex

1 answer 1

In your case, selectors * (take all child elements) and not(h1) (remove from the h1 sample) help:

 .bg *:not(h1){ filter: blur(2px); transform: scale(1.02); } 
 <article> <section class="menu"> <div>Блок с меню, прижатый вниз</div> </section> <section class="bg"> <h1>Обычный заголовок со стилями</h1> <h2>Обычный заголовок со стилями</h2> </section> </article>

  • and the .bg itself is not blurred, judging from the class name, I think it is necessary - Artem Gorlachev
  • Maybe. I answered by a specific example. If bg needs to be blurred all over, you can make it a child of some other one and carry out the same manipulation with this other - Grulex
  • Full code codepen.io/anon/pen/EEGbqB Selector * did not help. - Sanjar