css3 pointer-event NOT on child?

Issue

I have the folowwing structure

<div class='offline'>some text <button class='delete'>Delete</button></div>

Is it possible to disable the div with pointer-events: none but KEEP the button active ?

I tried with

div.offline:not(.delete) {
    pointer-events: none;
}

No success. Any idea ?

Solution

You can disable events on the parent and reenable them on the child.

.parent {
  pointer-events: none;
}

.child {
  pointer-events: auto;
}

<div class='parent'>
  foo
  <button class='child'>bar</button>
</div>

Answered By - Etheryte