CODEWITHSUNDEEP
csshtml
BenB
BenB

Reputation: 2907

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

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?

Upvotes: 3

Views: 1325

Answers (4)

You Old Fool
You Old Fool

Reputation: 22959

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>

Upvotes: 0

Peter Wong
Peter Wong

Reputation: 430

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

Upvotes: -1

vnponce
vnponce

Reputation: 121

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 }

Upvotes: 1

Sowmya
Sowmya

Reputation: 26979

Try this

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

Demo

Upvotes: 4

Related Questions