Selector for just the text of a div? [duplicate]

Question

I am trying to have the cursor change when the user hovers over the text of my div rather than the div itself. I currently have :

div {
  width: 500px;
  height: 500px;
  background-color: green;
}
div:hover {
  cursor: pointer
}

<div>
  Hello
</div>

Is there a way for me to somehow select just the text of a div and apply a hover effect on just the text itself.

Answer 1

Since you can't select text nodes in the CSS, you would have to wrap it in order to select it.

div {
  width: 500px;
  height: 500px;
  background-color: green;
}
div span:hover {
  cursor: pointer;
}

<div>
  <span>Hello</span>
</div>

However, if you want a work-around, you could add the text via a pseudo element like this:

div {
  width: 500px;
  height: 500px;
  background-color: green;
}
div:after {
  content: 'Hello';
  cursor: pointer;
}

<div></div>

Answer 2

div {
  width: 500px;
  height: 500px;
  background-color: green;
}
div p {
  cursor: pointer;
}

<div>
<p>Hello</p>
</div>