[Solved] How to target only the "stray text" inside a DIV?

[ephestione]

This question stems from the white space problem for percent width and inline-block divs that wrap before they should (example, 4 width:25% DIVs won’t fit in a line, because of the spaces between one DIV closing tag and next DIV opening one).
The font-size:0; solution if the one I prefer, but I have to remember to reset to “medium” or whatever everything in deeper levels. I can do that, but I don’t want to.
So I said, “hey I could just have the stylesheet target ONLY the stray text inside that container (read: spaces between HTML tags) and nothing else”.
To my knowledge there is no such existing selector (I tried #container>text but it obviously didn’t work), so I went for a parallel approach, and tried excluding EVERYTHING else apart from stray text, that is first-level child inside that container (only DIVs).
So I thought I was smart when I tried:
#container>*:not(div) {font-size:0;}
but it did nothing.

Suggestions?

[Paulie_D]

Do you mean bare text nodes like

<div>
This is a text node...not in an phrasing element
</div>

If it’s just the whitespace…you’ll just have to deal with it.

You can’t select text nodes to style them. CSS basically selects elements

[ephestione]

Thank you Paulie
Part of me feels just like your avatar now ;-)
In this case I understand that there is no way to directly select text nodes in CSS.
Does this also mean the “different” approach at selecting “everything which is not a DIV inside container X” fails for the same reason?

[Paulie_D]

Does this also mean the “different” approach at selecting “everything which is not a DIV inside container X” fails for the same reason?

Yes…because text nodes aren’t elements and so can’t be selected.

[ephestione]

Thank you again, and have a nice day :)

[Author]

Posts