Enable filter blur for multiple element in Html Css

Asked Jun 27 '22 at 14:17

Active Jun 27 '22 at 14:25

Viewed 19 times

I asked a question today that I did not get exactly what I wanted.

Now if I have multiple div tags and one P tag, how do I blur them?

for example :

<div>
     <div>
          <div>
               <div>
                    <p> text </p>
               </div>     
          </div>           
     </div>
</div>

styles :

div{
     filter:blur(5px);
   }
 p{
    filter:blur(0px)
  }

I mean, apply a blur filter to the first div and blur the three divs inside, but do not blur the p tag.

edited Jun 27 '22 at 14:25

asked Jun 27 '22 at 14:17

Sajjad

1

add `!important` to your `
`
– Laaouatni Anas Jun 27 '22 at 14:19
Can you provide a visual example of what you are trying to accomplish? – Pascal Jun 27 '22 at 14:22
Wrap your styles into a styles tag. – Steve Tomlin Jun 27 '22 at 14:22
I wrote before !important has no effect – Sajjad Jun 27 '22 at 14:24
1

As in the duplicate: you can't. Filters will affect anything inside a parent container. You would need to create different markup for this to work. – disinfor Jun 27 '22 at 14:29
Not possible to unblur an element once its parent has been blurred – Simp4Code Jun 27 '22 at 14:31
how i create different markup for this to work? – Sajjad Jun 27 '22 at 14:31

Enable filter blur for multiple element in Html Css

0 Answers0