CODEWITHSUNDEEP
csscss-selectors
Vanquished Wombat
Vanquished Wombat

Reputation: 9525

CSS selector for element that has content but no class

I need to be able to combine the selectors below, or use some other approach, to set a style for paragraphs that have content but no class. 

p:not([class])   // selector for paras without a class attribute.

and 

p:not(:empty)    // selector for empty paragraphs.

Have tried 

p:not([class]):not(:empty)

but not working in Chrome.

Solution must be CSS only and cross-browser (modern only, no IE6 here!), and no JS or JQuery.

A bit more information as you may be wondering why I would want to do this - the use case is an input box which is content-editable. The idea is that the user must apply one of the allowed styles to their input and any that they miss has to be highlighted. We had the no-class selector set but the richtext control we are using requires an empty para before user input, and so the highlight style appears when it should not. The richtext control is mandated, so I have to change the selector.

Upvotes: 0

Views: 2616

Answers (1)

BoltClock
BoltClock

Reputation: 723428

As has been pointed out,

  1. p:not([class]):not(:empty) is correct.
  2. However, your p element will match :not(:empty) if it contains whitespace, or any other element, including br.

If your rich text control enforces the leading p element, you may need to target that p separately with a different selector (one that's aware of your rich text control, at least), irrespective of the fact that it contains that wayward br.

Upvotes: 3

Related Questions