CSS: Apply pointer-events To Text Only

Question

Is there any way to use CSS pointer-events to apply only to the text e.g. in a div? This seems to work with SVGs but is there also a property to apply to regular text elements only?

This is what I am trying to achieve:

<div style="width: 500px; height: 500px">
Fire only when this text is clicked!
<p><!--Don't fire in this space--></p>
Fire here too!
</div>

I do not want to create a child in the parent div to capture the event.

Thanks in advance!

score 4 · Answer 1 · answered Mar 10 '17 at 14:39

4

Put it in a <span> and apply your css to it

answered Mar 10 '17 at 14:39

Anis D

761
11
25

Thank you for the answer, this would of course be a solution. However, I want to capture the event for the parent div when any part of the text is clicked and do not want to wrap every part separately in spans. – Ood Mar 10 '17 at 14:45

score 1 · Answer 2 · answered Mar 10 '17 at 14:48

.mousePointer{
  cursor: pointer;
}

<div style="width: 500px; height: 500px">
  <span style="cursor: pointer;">
    Fire only when this text is clicked!
  </span>
<p><!--Don't fire in this space--></p>
  <span style="cursor: pointer;">
    Fire Here
  </span>
</div>

Or

<div style="width: 500px; height: 500px">
  <span class="mousePointer">
    Fire only when this text is clicked!
  </span>
<p><!--Don't fire in this space--></p>
  <span class="mousePointer">
    Fire Here
  </span>
</div>

score 1 · Answer 3 · answered Mar 10 '17 at 14:48

Could something like this work?

div {
  pointer-events: auto;
}

div p {
  pointer-events: none;
}

Or select all children like

div * {
  pointer-events: none;
}

I'm not sure on your situation, but a little more html like a span tag would help keep things a little cleaner.

score 1 · Answer 4 · answered Mar 10 '17 at 15:15

First, there is no text node selector in CSS. So if you don't want to add any children in your parent div, you would have to exclude all other children. For example:

<div>
    No pointer events here
    <div class="other-class1"></div>
    <div class="other-class2"></div>
    <p></p>
    No pointer events here
<div>

Your selector would be something like:

div{
    pointer-events: auto;
}
div:not(.other-class1):not(.other-class2):not(p){
    pointer-events: none;
}

CSS: Apply pointer-events To Text Only

4 Answers4