CSS selector that match every elements which may contains text?

css, css-selectors

Solution

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

Problem

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.

Original source

Related problems