css3 pointer-event NOT on child?


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 ?


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

.parent {
  pointer-events: none;

.child {
  pointer-events: auto;
<div class='parent'>
  <button class='child'>bar</button>

Answered By – Etheryte

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.