Is it possible to stop propagation by CSS?

Question

With Javascript it is possible to stop propagation with code? E.g.

  function func1(event) {
      alert("DIV 1");
    if (document.getElementById("check").checked) {
      event.stopPropagation();
    }
  }

Is it also possible to stop propagation by CSS?

Negativism

Note that you had propagation spelled correctly in your code and the tag, and possible spelled correctly in the title; please take more care in the future. – Strung

No, it is not possible – Dalt

CSS can do a bit of stuff to not let certain events happen in the first place (like pointer-events: none) - but it can not really stop event propagation, that is not even remotely it’s job to begin with. – Soever

I have wondered the same, and have attempted the same, but truth be told CSS works on different thread then JS. Although you can trigger events in limited format e.g. a[target=_blank] { background-color: yellow; } – Finzer

I have had fun with it and can make some awesome UI effects depending upon how much creative risk one takes e.g. a[target=_blank]:hover:after { background-color: yellow; content: attr(message); } – Finzer

however, when this even happens it cannot stop propagation, to be honest its not really propagating its more of reflecting state i.e. hover vs not in hover. where as Js events are more of on i.e. on hover and not on hover. If your intention is to stop the on event propagation then statement by @Soever is correct - this is not css envisions it self to do at all. It is more at home with painting the DOM in its various states everything else is not its headache. So no it cannot. – Finzer

Answer 1

You can use this CSS simple code:

.disabled-button{
    pointer-events: none;
}

Paradigm

This not totally works as expected. For example: if you put pointer-events: none on a parent element, and then pointer-events: auto, on it's child, then triggering event on a child will propagate it to the parent and even more downwards. – Montherlant