Selector for just the text of a div?

This question already has an answer here:

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.


solution

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>