How to select an element that has no leading or trailing text nodes?

Question

I experimented with using the :only-child pseudo-class but unfortunately this does not seem to consider the text nodes:

<style type="text/css">
  div span:only-child {
    color: red;
  }
</style>

<div>
  Test
  <span>This still becomes red :(</span>
</div>

<div>
  <span>This becomes red, as it should!</span>
</div>
<div>
  <span>This does not become red - great!</span>
  <span>This does not become red - great!</span>
</div>

I am trying to find a way to detect when a specific element is completely alone within its container element in a situation where I am unable to introduce new classes.

Is there a way to achieve this with CSS?

Answer 1

Is there a way to achieve this with CSS?

Unfortunately, not.

Included in an old revision of the CSS Working Group "mistakes" list is missing the idea that..

No naked text mixing with elements. All raw text should have an addressable, stylable element wrapping it, created by CSS if necessary.

Current list

Text Nodes are not element and CSS can't select (or ignore) elements that don't exist.

So, it's probably best practice to always use a text element when incorporating text in a page...you never know when you might need to style it.