How to only target text content of element?
I have a div that contains a number of spans as its children and also a bit of text. The text is not surrounded by any tags, something which I cannot change.
How can I target (i.e. style) only the text contents of the div, but leave any children of the div untouched?
(I hope I'm not overlooking something very obvious here...)
5 Replies
only thing I can think of is to style the div, and then reverse the styling on the spans
.divselector > span should target all of the spans as direct children of the div you're targetingDepends on how you want the content placed. Ideally, div's aren't used to hold text content or at least I don't do it that way. Either you use the above solution or you wrap the spans in another container.
Any styles you apply to the div you can do that style
initial before applying other styles, but it's probably a structure issuehttps://codepen.io/z-/pen/BabjXPm/02dc66e57d789af76a7792f1bc7a0e80?editors=1100
Just put the text node in a span, it'll work the same except possible
If you can’t change the markup (at least that’s what I’m understanding as the issue) I would override the divs innerHTML to set the content in p tags or spans with classes and then set the text content/styles in there