css selector for element that only has text as child

Question

I want a CSS selector that will only give me the first 3 <li>s below that has no dom children. :empty doesn't work because it text are considered children.

 <ul>
  <li>I want this one</li>
  <li>I want this one</li>
  <li>I want this one</li>
  <li><a href="...">Not this one</a></li>
  <li><a href="...">Not this one</a></li>
</ul>

See http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Nenad Vracar, Mar 09 '17 at 23:12

Ason · Answer 1 · 2017-03-09T23:30:41.990

You can't do that as a general rule, as you would need a parent selector, but...

...as you want to target text only, you can use the :empty selector in combination with an attribute and a pseudo element

ul li:empty::after {
  content: attr(data-text);
  color: red;
  background: lightgray;
}

<ul>
  <li data-text="I want this one"></li>
  <li data-text="I want this one"></li>
  <li data-text="I want this one"></li>
  <li><a href="...">Not this one</a></li>
  <li><a href="...">Not this one</a></li>
</ul>

css selector for element that only has text as child

1 Answers1