Override div in CSS

Question

Why is this not working? (I am trying to create a div inside a div that cancels something out)

.blured {
  background-color: white;
  opacity: 0.1;
  filter: blur(10px);
}

.text {
  filter: blur(none);
  !
}

<div class="blured">
  <div class="text">
    <center>
      <h1 style="font-size: 100px">Title</h1>
    </center>
    <h1 style="margin-top: 100px; text-shadow: 2px 2px 2px #000000;">The text</h1>
  </div>
</div>

You cannot do that. A filter will be applied to the element as a whole. — Gabriele Petrioli, Nov 21 '17 at 00:20

score 1 · Accepted Answer · answered Nov 21 '17 at 00:25

You cannot undo the blur on inner elements. You could however (and this depends on what you really want to blur) add a :before pseudo-element and style that accordingly.

For example

.blured{position:relative;}

.blured:before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  
  background: linear-gradient(to right, red,green);
  opacity: 0.1;
  filter: blur(10px);
  z-index:-1;
}

.text {
  filter: blur(none);
  !
}

<div class="blured">
  <div class="text">
    <center>
      <h1 style="font-size: 100px">Title</h1>
    </center>
    <h1 style="margin-top: 100px; text-shadow: 2px 2px 2px #000000;">The text</h1>
  </div>
</div>

score 0 · Answer 2 · answered Nov 21 '17 at 00:27

0

You can try ":not" css selector. Doc from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/:not.

.blured>*:not(.text) {
  background-color: white;
  opacity: 0.1;
  filter: blur(10px);
}

https://jsfiddle.net/vz044hof/

answered Nov 21 '17 at 00:27

sjy_0831

29
4

Override div in CSS

2 Answers2