Css - Select text inside element inside element, without whats in the outside div

Question

I have a html div:

HTML

<li>
    <a>Title</a>
    (0)
</li>

I want to hide the "(0)" And leave the title.

I tried something like

CSS

li { display:none }
li a {display:block }

doesn't show the text inside the a tag after hides it.

How could I hide only what it is inside the div and not inside the a tag?

why dont you use another tag to wrap that free text? – Sowmya Jul 27 '15 at 06:51 — Sowmya, Jul 27 '15 at 06:51
I got access only to style.css in this case – BenB Jul 27 '15 at 06:58 — BenB, Jul 27 '15 at 06:58

score 4 · Accepted Answer · answered Jul 27 '15 at 06:53

4

Try this

   li{
     visibility:collapse;
    }
    li a {
        visibility:visible;
    }

Demo

answered Jul 27 '15 at 06:53

Sowmya

26,684
21
96
136

It works. The problem is that the li lost its list style. If i add display:list-item; to li a, the bullet becomes part of the link and its not what i want. How could i show the the list style with the code above? – BenB Jul 27 '15 at 07:14

score 1 · Answer 2 · answered Jul 27 '15 at 06:54

1

If you only want to hide i'll use this.

li { font-size:0px }
li a {font-size: 20px }

Maybe in other case you can use a span inside li tag

   <li>
     <a>Title</a>
       <span>(0)</span>
   </li>

And Style

    li span{ display:none }

answered Jul 27 '15 at 06:54

vnponce

121
1
6

score 0 · Answer 3 · edited May 23 '17 at 10:27

You can't directly target text nodes with CSS as discussed in here. You can, however, achieve what you want with jquery or straight javascript.

 $('li').contents().each(function () {
     if (this.nodeType == Node.TEXT_NODE) $(this).remove();
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul>
    <li>
        <a>Title</a>
        (0)
    </li>
</ul>

score -1 · Answer 4 · answered Jul 27 '15 at 06:55

-1

No you can't. All child elements will be hidden if you hide it's parent element.

answered Jul 27 '15 at 06:55

Peter Wong

430
5
12

Css - Select text inside element inside element, without whats in the outside div

4 Answers4