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

При наведении на меню "menu", добавлены стили к классу "bg" filter: blur(2px), transform: scale(1.02);. При этом дочерний h1, также подхватывает стили родителя, что логично. Вопрос, как отменить применение этих стилей к дочернему элементу?

2
  • Никак, только разбить их на разные. В вашем случае все, что есть в .bg я вынес бы в .bg:before 9 апр 2018 в 8:41
  • Прикрепите так же работающий код в вопрос, чтобы можно было наглядно увидеть
    – Grulex
    9 апр 2018 в 8:42

1 ответ 1

2

В вашем случае помогают селекторы * (взять все дочерние элементы) и not(h1) (убрать из выборки h1):

.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>

3
  • а сам .bg при этом не размыт, судя из названия класса думаю это обязательно 9 апр 2018 в 8:49
  • Возможно. Я ответил по конкретному примеру. Если надо bg весь размыть, можно сделать его дочерним для какого-то другого и такую же манипуляцию провести с этим другим
    – Grulex
    9 апр 2018 в 8:52
  • Полный код codepen.io/anon/pen/EEGbqB Селектор * не помог. 9 апр 2018 в 9:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.