CSS Selector for adding content through :after / :before when HTML element is missing

Question

I would like to add content with the CSS :before selector in case an unsorted HTML list does not have any list items. I can not use :empty, because there might be white space (blanks, newlines, tabs, etc.) between ul and /ul.

As :blank is not implemented yet in most browsers, I need another solution.

Here is an example:

// CSS
ul > li::before { content: 'abc'; }   /* how to negate this? */

// 'abc' should not show up
<ul>
  <li>xxx</li>
  <li>xxx</li>
</ul>

// 'abc' should show up
<ul>
</ul>

The CSS above shows 'abc' when the unsorted list has children. I would like to show 'abc' when the unsorted list has no children. So I'm looking for the negation of the CSS line.

The only option in css is `:empty`. if you could use it, then you could try `ul:empty::after {content:"abc"}`. Try using Javascript for that strict options. — Farzad Yousefzadeh, Jan 10 '16 at 14:57
`:empty` is for form elements. You cannot achieve this without the use of Javascript. Also, `content` **must** have a real element to work on, and it must be one that can have content. So for example pseudo element do not work on checkboxes and input fields. — connexo, Jan 10 '16 at 14:59

score 4 · Accepted Answer · edited May 23 '17 at 11:44

This won't be possible without the functionality of the :blank pseudo-class, I'm afraid.¹

There are only two possible places you can insert a ::before pseudo-element in your scenario: in the ul, or in a li. Since you want to insert the generated content only when no li elements are present, that leaves you only with ul.

Although ::before and ::after are inserted before and after an element's descendant elements respectively, you can't target them relative to those descendant elements with a sibling combinator, and pseudo-elements currently do not support structural pseudo-classes. Which means, in other words, you won't be able to say "prevent ul::before from generating content in the presence of one or more li elements", nor can you apply the :only-child pseudo-class to ul::before.

In a situation where one can use :empty, it's as simple as

ul:empty::before { content: 'abc'; }

but since you cannot use :empty for the reasons you have given, if you really cannot prevent the whitespace from being generated (e.g. if the content is coming from a WYSIWYG editor or some other transformation that may result in leftover whitespace) you'll have to add a class to any ul elements with no children.

¹ _{A recent revision to selectors-4 proposes subsuming the functionality of :blank into :empty instead, but that likewise is new and requires the cooperation of implementers.}

Yea, either add a class (or) strip the whitespace characters in the `ul` and let the `ul:empty::after` take effect? — Harry, Jan 10 '16 at 15:12

CSS Selector for adding content through :after / :before when HTML element is missing

1 Answers1