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.

Interesting question. However, what is your purpose in this? Will simply using the *, html, or body selector not do what you need? — Josh Beam, Jan 10 '14 at 20:37
You could just set the font-size on those other elements after: `* {font-size: 12px;} img, object, etc. {font-size: something else;}` or specifically target elements that contain text: `p, strong, etc {font-size: 12px;}` instead of using the universal selector — brouxhaha, Jan 10 '14 at 20:37
What do you wanna accomplish? Most of the time inheritance will do the job for you. So just set a `font-size` for `body`. If you really want every text element having a specific `font-size` (also `h1`, `h2` etc) you will have to specify them in the selector. — lukasgeiter, Jan 10 '14 at 20:40
I would say `html, body { font-size: 12px; }` would be your best bet. This gives any element you use a default font-size while not having to assign it to every element. — Josh Powell, Jan 10 '14 at 20:40
Think you might find what you're looking for here, maybe. [Apply CSS Repeatedly to Specific Words](http://stackoverflow.com/questions/19189822/apply-css-repeatedly-to-specific-words) — misterbear, Jan 10 '14 at 20:41
Lookin at http://www.w3.org/TR/css3-selectors/#selectors i am afraid you cant select elements that may contain text. — laaposto, Jan 10 '14 at 20:44
Possible duplicate of [Is there a CSS selector for elements containing certain text?](https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text) — Inigo, Mar 20 '19 at 16:54

score 12 · Answer 1 · answered Jan 10 '14 at 20:51

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;
}

score 3 · Answer 2 · answered Jan 10 '14 at 20:54

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.

score 1 · Answer 3 · answered Jan 10 '14 at 20:43

I don't think there is a specific way to locate text based elements with a pseudo selector, but this is a good location to learn more about the pseudo class: http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

And here is a great article about the reset: http://www.css-reset.com/

And a great resource for creating a CSS reset: http://www.cssreset.com/

CSS selector that match every elements which may contains text?

3 Answers3