How to hide elements using css only without id or class

Question

How can I hide only those words " Piano lesson " using CSS, but without an identifier 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 can not change html!

Answer 1

wrap it in spanand use the internal style.

Note: Inner style is 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>

Run codeHide result

you said: how can I move the contents of (Canceled) to the place of Piano Lesson and replace it?

Using 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> 

Run codeHide result

Answer 2

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

Run codeHide result

Just add tags Piano Lessonand use style="display:none;"to hide it.

: ( )

.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>

Hide result

Answer 3

$('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);
})

Answer 4

.

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}

:

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}

Answer 5

html... , .

... , IE Edge. Chrome 59 FF 54, .

, , 89% .

.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>

Hide result

Answer 6

HTML - , .

, :

.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>

Hide result