:NOT selector in css is not working in my case

Question

I have html tree structure as shown in above image. I am applying following CSS to this html tree structure but it is not working.

.blur:not(.activerow){
  filter: blur(3px);
  pointer-events: none;
}

My output is like this:

Entire page gets blur, including the activerow class. I want to blur entire blur class except activerow class

You add the blur to the *parent element* but want to exclude its children. You should be working with elements on the same level — VLAZ, Oct 03 '19 at 07:35
Instead of adding the blur class to the table as a whole, you need to add it to every row. — MauriceNino, Oct 03 '19 at 07:36

score 1 · Answer 1 · answered Oct 03 '19 at 07:38

You need to use :not with the target element class, which in your case is tr

.blur tr:not(.activerow) {
  filter: blur(3px);
  pointer-events: none;
}

.activerow {
  color: red;
}

<div class="blur">
  <table style="width:100%">
    <tr class="activerow">
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </table>
</div>

score 1 · Answer 2 · answered Oct 03 '19 at 07:38

You are applying the blur effect to a parent to all the rows, so excluding a row doesn't help. You need to apply the effect to each row and exclude the ones you don't want:

.blur tr:not(.activerow){
  filter: blur(3px);
  pointer-events: none;
}

<div class="blur">
  <table>
    <tr><td>one</td><tr>
    <tr class="activerow"><td>two</td><tr>
    <tr><td>three</td><tr>
    <tr><td>four</td><tr>
  </table>
</div>

:NOT selector in css is not working in my case

2 Answers2