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!

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!

• javascript
• html
• css
• pointer-events

4 Answers 4

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

.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>

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.

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;
}