How to select the text node/content using CSS selectors

Question

Is it possible to select the content/text node of a tag using css selectors?

For example I have some content such <div><p class="x">Hello world</p></div>. How can I get/select the text node ("hello world") using CSS?

I know that I could get the p element using .x class selector and then use innerHTML with javascript but I would like to know if it's possible to get the exactly text node using CSS and just set the node data (which is basically text as the node is a text node). Is it possible?

You can't manipulate the content of an element with CSS unless it is a `:before` or `:after` pseudo element. — amflare, Mar 07 '18 at 18:17
@amflare I don't want to manipulate it with CSS. I just want to get it with querySelector — mike, Mar 07 '18 at 18:22
I'm even less clear now. `querySelector ` is JavaScript, not CSS — j08691, Mar 07 '18 at 18:23
@mike but in your question you are saying _**I would like to know if it's possible to get the exactly text node using CSS**_ — Bhuwan, Mar 07 '18 at 18:24
@j08691 but what goes inside querySelector(``) is a CSS, right? — mike, Mar 07 '18 at 18:25
[Yes](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) — amflare, Mar 07 '18 at 18:26
@amflare that would give me the "p" node. I need to get the underlaying node which is a text node. (i.e. "hello world") — mike, Mar 07 '18 at 18:26
You want to do something to the text that ignores the padding, border, and margin? — amflare, Mar 07 '18 at 18:27
Does this answer your question? [Is there a CSS selector for text nodes?](https://stackoverflow.com/questions/5688712/is-there-a-css-selector-for-text-nodes) — ggorlen, Sep 22 '22 at 14:39

score 0 · Accepted Answer · edited Feb 02 '20 at 23:19

0

No, it is not possible.

However, if you're trying to figure out how to select the text node with querySelector, do what @j08691 suggested:

document.querySelector('.x').textContent

That or

document.querySelector('.x').firstChild.nodeValue

should work.

edited Feb 02 '20 at 23:19

the Tin Man

158,662
42
215
303

answered Mar 08 '18 at 08:38

jayly

156
6

How to select the text node/content using CSS selectors

1 Answers1