How to hide elements using css only without id or class

Question

how can I hide only the words "Piano Lesson" from this tag using CSS but without an ID or class but using only selectors?

<div class="alert alert-success dynamic-alert ">
    <ul>
        <li>
            (Canceled) <a href="http://www.google.ch">July 18, 2017 13:30</a> Piano Lesson
        </li>
    </ul>
</div>

I am not able to change the html!

You should wrap text in ``, and then you'll be able to hide it — fen1x, Jul 18 '17 at 11:52
Here you need to put this text "Piano Lesson" in any of html attributes. — Emipro Technologies Pvt. Ltd., Jul 18 '17 at 11:53
Possible duplicate of [Hide text node in element, but not children](https://stackoverflow.com/questions/15196630/hide-text-node-in-element-but-not-children) — , Jul 18 '17 at 12:09

Ehsan · Answer 1 · 2017-07-18T14:03:08.633

wrap it in span and use internal style.

Note:internal style better than inline style.

.alert li a + span {
  display:none;
}

.alert li a + span {
  display:none;
}

<div class="alert alert-success dynamic-alert ">
    <ul>
        <li>
            (Canceled) <a href="http://www.google.ch">July 18, 2017 13:30</a> <span>Piano Lesson<span>
        </li>
    </ul>
</div>

you said : how could I move the content "(Canceled)" to the place of "Piano Lesson" and replace it?

With jquery :

$(document).ready(function(){
  $('button').click(function(){
    var c = $($('li a')[0].previousSibling).text();
    $($('li a')[0].previousSibling).wrap('<span style="display:none"></style>');
    $($('li a')[0].nextSibling).wrap('<span style="display:none"></style>');
    $('li a').after('<span>' + c + '</span>')
  }) 
})

$(document).ready(function(){
  $('button').click(function(){
    var c = $($('li a')[0].previousSibling).text();
    $($('li a')[0].previousSibling).wrap('<span style="display:none"></style>');
    $($('li a')[0].nextSibling).wrap('<span style="display:none"></style>');
    $('li a').after('<span>' + c + '</span>')
  }) 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="alert alert-success dynamic-alert ">
    <ul>
        <li>
            (Canceled)<a href="http://www.google.ch">July 18, 2017 13:30</a>Piano Lesson
        </li>
    </ul>
    <button>Go</button>
</div>

That helped! Any how could I move the content "(Canceled)" to the place of "Piano Lesson" and replace it? Thank you! — iolli, Jul 18 '17 at 12:07

Kamal Chhirang · Answer 2 · 2017-07-18T12:09:58.090

1

<div class="alert alert-success dynamic-alert ">
    <ul>
        <li>
            (Canceled) <a href="http://www.google.ch">July 18, 2017 13:30</a> <span style="display:none;">Piano Lesson</span>
        </li>
    </ul>
</div>

Just add Piano Lesson inside tags, and use style="display:none;" to hide it.

Edit: You can also use this (No extra ID & Class needed)

.alert ul li span{
display:none;
}

<div class="alert alert-success dynamic-alert ">
    <ul>
        <li>
            (Canceled) <a href="http://www.google.ch">July 18, 2017 13:30</a> <span>Piano Lesson</span>
        </li>
    </ul>
</div>

edited Jul 18 '17 at 12:09

answered Jul 18 '17 at 11:59

Kamal Chhirang

490
4
14

I can not modify the tag.. I can only chanche the CSS in the stylesheet.. – iolli Jul 18 '17 at 12:06
Edited my answer, you can at least add the span tag around Piano Lesson right? Let me know, if you need something else also – Kamal Chhirang Jul 18 '17 at 12:10

score 1 · Answer 3 · answered Jul 18 '17 at 12:13

1

$('ul li').each(function(){
    var content=$(this).html();
    var check=content.search('Piano Lesson');
    if(check!='-1'){
        content=content.replace('Piano Lesson','');
    }
    $(this).html(content);
})

answered Jul 18 '17 at 12:13

vikas kumar Gupta

67
7

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. A ***good answer*** will always have an explanation of what was done and why it was done in such a manner, not only for the OP but for future visitors to SO. – Jay Blanchard Dec 28 '17 at 13:12

score 0 · Answer 4 · answered Jul 18 '17 at 11:54

Follow this code.

Html

<ul>
        <li>
            (Canceled) <a href="http://www.google.ch">July 18, 2017 13:30</a><span> Piano Lesson</span>
        </li>
    </ul>

css

ul li span{display:none}

Or another way:

Html

<ul>
        <li>
            (Canceled) <a href="http://www.google.ch">July 18, 2017 13:30</a><span class="span-style"> Piano Lesson</span>
        </li>
    </ul>

css

ul li .span-style{display:none} or .span-style{display:none}

score 0 · Answer 5 · answered Jul 18 '17 at 12:00

If you can't edit the html...you can still get the desired effect but in a hacky way.

This has no cross browser support yet...and by I mean it won't work on IE or Edge. I tested it in Chrome 59 and FF 54 and all is good there.

With that being said, Can I use says this will work for at least 89% of users.

.alert li {
  -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1)12.8em, /** <---- manually edit this value to determine the cutoff point **/
  rgba(0, 0, 0, 0)0, rgba(0, 0, 0, 0));
}

<div class="alert alert-success dynamic-alert ">
  <ul>
    <li>
      (Canceled) <a href="http://www.google.ch">July 18, 2017 13:30</a> Piano Lesson
    </li>
  </ul>
</div>

Interesting, but could be annoying to have to manually edit this — sol, Jul 18 '17 at 12:01

score 0 · Answer 6 · answered Jul 18 '17 at 12:03

Altering the HTML is the best option as others have said.

An alternative method if you can't do that:

.alert ul li {
 font-size: 0;
}

.alert ul li a {
 font-size: 16px;
}

.alert ul li:before {
  content: 'Canceled';
  display: inline-block;
  font-size: 16px;
  margin-right: 5px;
}

<div class="alert alert-success dynamic-alert ">
    <ul>
        <li>
            (Canceled) <a href="http://www.google.ch">July 18, 2017 13:30</a> Piano Lesson
        </li>
    </ul>
</div>

How to hide elements using css only without id or class

6 Answers6