HelloWorldWhen I use...">

Select node text using CSS

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.

Is there any CSS selector that I can take only node text? In particular, Worldin this example?

Edited by:

Unfortunately, I cannot change the markup, and I only need to use the CSS selector, because I work with a system that combines rss feeds.

+5
source share
6 answers

Current CSS state cannot do this, check this link: W3C

The problem is that the content you write on the screen does not appear in DOM: P.

::outside ( , Safari 6.0.3) .

, DOM: JSfiddle

, a { content: attr(href);}, CSS DOM- node. , innerHTML . , , .

+3

, : , , CSS?

- . "World" , .

, h1, div.sponsor. , , "" , - :

h1 {
    background:black;
    color:white;
}

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

, , "", , , , <div>Hello</div> World Foo.

, CSS "" .

+3

, js. div, . , :

:

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

, !

+1

:

h1 {
  color: red;
}
h1 * {
  color: lime;
}
<h1> 
     <div class="sponsor"> 
          <span>Hello</span>  
     </div> 
     World 
</h1>
Hide result
+1

, "World" html, #.

I set the font size to 0 in the 'h1' element and then applied my css to the div class. Basically hides extra text, but stores content in a div.

0
source

I don’t know how to do this with CSS only, but ...

Using jQuery, you can select all the elements inside except the material inside the child element

$ ("h1: not (h1> div)"). css () and put any CSS effect you need inside.

-2
source

All Articles