CSS selector that match every elements which may contains text?

Question

Is there any way to select elements which may contains text?

Something like this:

*:text {
   font-size: 12px;
}

I want to use it for my reset.css, but I can't find a way how to do it, so for now I use this code:

* {
   font-size: 12px;
}

This solution works for all text based elements (for example STRONG, P, A, etc.), but it also apply this style to non-text elements like IMG, OBJECT and others.

So I am wondering if is there any other solution to set CSS properties for all text based elements, but nothing else.

Answer 1

You can't target an element based on the fact of it containing text or not with a css selector. On the other hand you can look at the best way of setting a global font-size or style you want for your text.

With what you already have,

* {
   font-size: 12px;
}

This is assigning that style to everything in the dom. You may not think it but it is applying that to your head, body, html, and any tag on your page. There is a couple options you can go about this and I'll list them from best to worst.

html, body { /* this allows the children to inherit this style */
   font-size: 12px;
}

body * { /* assigns this style to every tag inside of your body tag */
    font-size: 12px;
}

p, span, a, etc { /* you decided what tags would most likely contain text to apply that style */
    font-size: 12px;
}

* { /* the worst option, applying that style to every tag */
    font-size: 12px;
}

Answer 2

If you just want to style elements like img, object and the like then the easiest solution is to reference that elements directly in your css.

For what it's worth there is the :empty selector (pseudo class). It's not exactly what you want but it selects elements that have no child elements, including text nodes. So it would cover img, of course, but also an empty (sic!) p. It may not be supported by older browsers.