How to select a text node with CSS

Question

I have the following HTML markup:

<h1> 
     <div class="sponsor"> 
          <span>Hello</span>  
     </div> 
     World 
</h1>

When I use the CSS selector h1 I get Hello World.

I can't unfortunately change the markup and I have to use only CSS selectors because I work with the system that aggregates RSS feeds.

Is there any CSS selector which I can take only the text node? Specifically the World in this example?

http://stackoverflow.com/questions/5688712/is-there-a-css-selector-for-text-nodes-elements — Thomas Kelley, Mar 26 '13 at 16:10
you could apply changes to `h1` then undo them with `.sponsor`. It depends what you're trying to do. — gaynorvader, Mar 26 '13 at 16:11
use different span tag for the world and you can give it a id. — Praveen Dabral, Mar 26 '13 at 16:16
Does this answer your question? [Is there a CSS selector for text nodes?](https://stackoverflow.com/questions/5688712/is-there-a-css-selector-for-text-nodes) — ggorlen, Sep 22 '22 at 14:37

score 6 · Accepted Answer · answered Mar 26 '13 at 17:06

The current state of CSS can't do this, check this link: W3C

The problem here is that the content you write to the screen doesn't show up in the DOM :P.

Also ::outside doesn't seem to work yet (at least for me in Safari 6.0.3) or it simply doesn't generate the desired result yet.

Check my fiddle and then check the DOM source: JSfiddle

Finally there are attribute selectors a { content: attr(href);}, making CSS able to read DOM-node attributes. There doesn't seem to be a innerHTML equivalent of this yet. It would be great tho if that was possible, whereas you might be able to manipulate the inner markup of a tag.

The document where `::outside` is defined has been abandoned pending a complete rewrite. See http://stackoverflow.com/questions/10419614/enable-support-for-css3-outside-pseudoelement/10424878#10424878 Also, what this answer refers to as an attribute selector is not an attribute selector - that is something entirely different, this is simply a CSS function. Lastly, it doesn't make sense to have a CSS equivalent of `innerHTML` - `innerHTML` is an API for manipulating HTML, whereas CSS is just CSS. — BoltClock, Mar 05 '15 at 14:46

score 4 · Answer 2 · answered Mar 05 '15 at 14:43

4

Bit of a workaround:

h1 {
  color: red;
}
h1 * {
  color: lime;
}

<h1> 
     <div class="sponsor"> 
          <span>Hello</span>  
     </div> 
     World 
</h1>

answered Mar 05 '15 at 14:43

gvee

16,732
35
50

score 3 · Answer 3 · edited May 23 '17 at 12:26

This is almost the opposite of a question I asked last week: Is it possible to select the very first element within a container that's otherwise pure text without using classes or identifiers in pure CSS?

The short answer is no. "World" in this example isn't an element of its own - therefore there isn't a way to select it.

What you would have to do here is style the h1 then override that styling with div.sponsor. For instance, if you wanted "World" here to have a black background with white text you woud use something similar to:

h1 {
    background:black;
    color:white;
}

h1 div.sponsor {
    background:white;
    color:black;
}

Unfortunately, however, this wouldn't work if you were only wanting the word "World" styled and your markup had more than just that within <div>Hello</div> World Foo, for instance.

I don't believe it would be possible with pure CSS to style just "World" in this situation.

So it's not possible with pure CSS to select just the text `World`, isn't it? — giokokos, Mar 26 '13 at 16:39

score 1 · Answer 4 · answered Jul 15 '13 at 09:16

I also met same problem, where I can't touch the markup and have no control with js. I needed to hide a text nodes in a div element, but the element to remain visible. So here is my solution:

markup:

<div id="settings_signout_and_help">
        <a id="ctl00_btnHelpDocs" class="ico icoHelp" href="http://" Help Guide</a>
            Signed in as: <a id="ctl00_lUsr" href="Profile.aspx">some</a>&nbsp;&nbsp;
            <a href="Logout.aspx">Home</a>
                Sign out
        </div>

css:

#settings_signout_and_help {
font-size: 1px !important;
}

#settings_signout_and_help a {
font-size: 13px !important;
}

Hope this helps guys!

score 0 · Answer 5 · answered May 18 '15 at 19:38

0

I had a similar problem where I had to remove the "World" text from html generated by a C# function.

I set the font-size to 0 on the 'h1' element and then applied my css to div class. Basically hiding the extra text, but keeping content in the div.

answered May 18 '15 at 19:38

Kozy

2,691
3
18
11

score -3 · Answer 6 · answered Mar 07 '16 at 19:07

-3

I don't know how to do it with just CSS, but...

Using JQuery, you could select all the elements inside except the stuff inside its child element

$("h1:not(h1 > div)").css() and put whatever CSS effect you want inside there.

answered Mar 07 '16 at 19:07

AliInvestor

143
1
4

How to select a text node with CSS

6 Answers6

Linked

Related