How to remove specific text with CSS

Question

I want to remove the last two span tags with CSS. My code is

<h1 class='av-special-heading-tag'  itemprop="headline"  >Turning </h1><div class='special-heading-border'><div class='special-heading-inner-border' ></div></div></div>
<span class="av_font_icon avia_animate_when_visible av-icon-style-  av-no-color avia-icon-pos-center " style=""><span class='av-icon-char' style='font-size:20px;line-height:20px;' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' ></span></span>
<section class="av_textblock_section"  itemscope="itemscope" itemtype="https://schema.org/CreativeWork" ><div class='avia_textblock '  style='font-size:20px; '  itemprop="text" ><p style="text-align: center;">
<span style="color: #641380;">Mazak Nexus 200MY</span><br />
<span style="color: #641380;"> Mazak Nexus QNT 200MY</span><br />
<span style="color: #641380;"> Mazak Nexus QNT 200MY</span><br />
<span style="color: #641380;"> Mazak SQT200M</span><br />
<span style="color: #641380;"> Mazak SQT10M</span><br />
<span style="color: #641380;"> Mazak Nexus</span><br />
<span style="color: #641380;"> Mazak QT10</span><br />
<span style="color: #641380;"> Mazak QT10</span><br />
<span style="color: #641380;"> Mazak QT8</span><br />
<span style="color: #641380;"> Mazak Colchester lathe</span><br />
<span style="color: #641380;"> Mazak Harrison lathe</span></p>
</div></section></div> 

So want to remove

<span style="color: #641380;"> Mazak Colchester lathe</span><br />
<span style="color: #641380;"> Mazak Harrison lathe</span></p> 

using Css Any help on this how to do this. I Dont Want to do it any other way due to a problem, so can't use the visibility element.

Answer 1

You can select second last element of certain type with nth-last-of-type(2) and the last one with last-of-type.

You should use -of-type and not last-child because you have some br elements that count as children. If you want to use last-child instead, you should delete all the br and give display:block to span so they will stay only 1/line

I commented out the display:none and gave a background-color for example purposes only. You can 'uncomment' the display:none and the elements will get hidden. display:none is the most you can do with css in terms of hiding elements. You cannot remove them entirely.

As a side note, why do all the spans have the exact same inline style ? why don't you use Css for that? also the other elements have a bunch of inline styles..

p span:nth-last-of-type(2),p span:last-of-type {
    background:green;
    /*display:none*/
}

<h1 class='av-special-heading-tag' itemprop="headline">Turning </h1>
<div class='special-heading-border'>
  <div class='special-heading-inner-border'></div>
</div>
<div>
<span class="av_font_icon avia_animate_when_visible av-icon-style-  av-no-color avia-icon-pos-center " style=""><span class='av-icon-char' style='font-size:20px;line-height:20px;' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' ></span></span>
<section class="av_textblock_section" itemscope="itemscope" itemtype="https://schema.org/CreativeWork">
  <div class='avia_textblock ' style='font-size:20px; ' itemprop="text">
    <p style="text-align: center;">
      <span style="color: #641380;">Mazak Nexus 200MY</span><br />
      <span style="color: #641380;"> Mazak Nexus QNT 200MY</span><br />
      <span style="color: #641380;"> Mazak Nexus QNT 200MY</span><br />
      <span style="color: #641380;"> Mazak SQT200M</span><br />
      <span style="color: #641380;"> Mazak SQT10M</span><br />
      <span style="color: #641380;"> Mazak Nexus</span><br />
      <span style="color: #641380;"> Mazak QT10</span><br />
      <span style="color: #641380;"> Mazak QT10</span><br />
      <span style="color: #641380;"> Mazak QT8</span><br />
      <span style="color: #641380;"> Mazak Colchester lathe</span><br />
      <span style="color: #641380;"> Mazak Harrison lathe</span></p>
  </div>
</section>
</div>

If it removes other too, just use a more specific selector like .avia_textblock > p span:nth-last-of-type(2), .avia_textblock > p span:last-of-type { display:none}

Answer 2

CSS can only affect the visual part of the DOM, therefore you will need to use JavaScript to remove the last two items. You could display: none; the last two items using CSS selector, but the elements will still be in the DOM.

.av_textblock_section span: nth-last-of-type(-n + 2) {
  display: none;
}

<section class="av_textblock_section" itemscope="itemscope" itemtype="https://schema.org/CreativeWork">
  <div class='avia_textblock ' style='font-size:20px; ' itemprop="text">
    <p style="text-align: center;">
      <span style="color: #641380;">Mazak Nexus 200MY</span><br />
      <span style="color: #641380;"> Mazak Nexus QNT 200MY</span><br />
      <span style="color: #641380;"> Mazak Nexus QNT 200MY</span><br />
      <span style="color: #641380;"> Mazak SQT200M</span><br />
      <span style="color: #641380;"> Mazak SQT10M</span><br />
      <span style="color: #641380;"> Mazak Nexus</span><br />
      <span style="color: #641380;"> Mazak QT10</span><br />
      <span style="color: #641380;"> Mazak QT10</span><br />
      <span style="color: #641380;"> Mazak QT8</span><br />
      <span style="color: #641380;"> Mazak Colchester lathe</span><br />
      <span style="color: #641380;"> Mazak Harrison lathe</span></p>
  </div>
</section>

Answer 3

Use code bellow:
:nth-last-of-type(-n+2) mean 2 last element...
display:none; remove them

section span:nth-last-of-type(-n+2){
display:none;
}

<h1 class='av-special-heading-tag'  itemprop="headline"  >Turning </h1><div class='special-heading-border'><div class='special-heading-inner-border' ></div></div></div>
<span class="av_font_icon avia_animate_when_visible av-icon-style-  av-no-color avia-icon-pos-center " style=""><span class='av-icon-char' style='font-size:20px;line-height:20px;' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' ></span></span>
<section class="av_textblock_section"  itemscope="itemscope" itemtype="https://schema.org/CreativeWork" ><div class='avia_textblock '  style='font-size:20px; '  itemprop="text" ><p style="text-align: center;">
<span style="color: #641380;">Mazak Nexus 200MY</span><br />
<span style="color: #641380;"> Mazak Nexus QNT 200MY</span><br />
<span style="color: #641380;"> Mazak Nexus QNT 200MY</span><br />
<span style="color: #641380;"> Mazak SQT200M</span><br />
<span style="color: #641380;"> Mazak SQT10M</span><br />
<span style="color: #641380;"> Mazak Nexus</span><br />
<span style="color: #641380;"> Mazak QT10</span><br />
<span style="color: #641380;"> Mazak QT10</span><br />
<span style="color: #641380;"> Mazak QT8</span><br />
<span style="color: #641380;"> Mazak Colchester lathe</span><br />
<span style="color: #641380;"> Mazak Harrison lathe</span></p>
</div></section>