Is There a CSS Selector For Text Nodes

Is there a CSS selector for text nodes?

Text nodes cannot have margins or any other style applied to them, so anything you need style applied to must be in an element. If you want some of the text inside of your element to be styled differently, wrap it in a span or div, for example.

How to select the text node/content using CSS selectors

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.

Is there a CSS selector for elements containing certain text?

If I read the specification correctly, no.

You can match on an element, the name of an attribute in the element, and the value of a named attribute in an element. I don't see anything for matching content within an element, though.

Is it possible to use the :not() selector to target specific text nodes?

Simple selectors represent elements. This is true for all simple selectors, including * and :not(). Text is contained by an element, but is not an element in its own right. You won't be able to "match" just the text with any CSS selector, because as far as selectors are concerned, what the DOM calls text nodes don't even exist in the document tree.

The specification itself offers only three lines on the :not() selector.

The first line in the specification supports this:

The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument.

Notice that it says "It represents an element".

If you're doing web scraping, consider XPath:

//div[contains(concat(' ', @class, ' '), ' status-date ')]/strong/following-sibling::text()

How to select a text node with CSS

The current state of CSS can't do this, check this link: W3C

The problem here is that the content you write to the screen doesn't show up in the DOM :P.

Also ::outside doesn't seem to work yet (at least for me in Safari 6.0.3) or it simply doesn't generate the desired result yet.

Check my fiddle and then check the DOM source: JSfiddle

Finally there are attribute selectors a { content: attr(href);}, making CSS able to read DOM-node attributes. There doesn't seem to be a innerHTML equivalent of this yet. It would be great tho if that was possible, whereas you might be able to manipulate the inner markup of a tag.

Select Text node using querySelector

As already answered, CSS does not provide text node selectors and thus document.querySelector doesn't.

However, JavaScript does provide an XPath-parser by the method document.evaluate which features many more selectors, axises and operators, e.g. text nodes as well.

let result = document.evaluate(  '//div[@class="a"]/div[@class="clear"]/following-sibling::text()[1]',  document,  null,  XPathResult.STRING_TYPE).stringValue;
console.log(result.trim());

<body>  <div class="a">    <h1>some random text</h1>    <div class="clear"></div>    Extract This Text    <p></p>    But Not This Text    <h2></h2>  </div></body>

Is There a CSS Selector For Text Nodes