Targeting Text Nodes with CSS

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

How can I target a text node?

Using visibility property:

One approach to hide the the text node content of the element would be to set visibility: hidden on the parent div and then override it for the span.

The downside of using visibility: hidden would be that it would leave a blank space if there is any other element after the text node (refer below snippet).

div.x {

  visibility: hidden;

}

div.x span {

  visibility: visible;

}

<div class="x">

  <span>This should be visible</span>

  <span>This should be visible</span>

  This shouldn't be.

  <span>Some other tag</span>

</div>

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 target direct text and not text within tags?

`h1:not(small)`

Your selector h1:not(small) doesn't work because it says this:

Target all h1 elements that are not small elements.

It's that same as using the h1 selector by itself.

`h1 :not(small)`

You would have been closer with h1 :not(small), which says:

Target all descendants of an h1 except small elements.

Boom! Exactly what you want.

Except that text contained directly inside an element (i.e, text with no tags around it) becomes an anonymous element. And anonymous elements are not selectable by CSS.

h1 :not(small) {

  color: orange;

}

<h1>This text is contained directly inside the container. It is not selectable by CSS. It is an anonymous element. <small>This text is inside a small element</small></h1>

<hr>

<h1><span>This text is contained in a span. It is selectable by CSS</span> <small>This text is inside a small element</small></h1>

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.

How to apply CSS to text that is NOT inside a certain tag?

You can't apply CSS in that way, but you could use negative margins:

<html>
<head>
<style>
body {
    padding-left: 100px;
}

div {
  margin-left: -100px;
}
</style>
</head>
<body>

<div style="background-color: blue;">This is a div</div>
This is not a div

</body>
</html>

Result: https://codepen.io/cmbuckley/pen/zjOXWN

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.