Hide A Specific Part On An Html Code Via Css

I am trying to hide a part of an HTML code that is not itself within a tag. Visually this code gives : CHF120.95 - CHF152.95 Goal : Only display CHF120.95 with the help of this pos

Solution 1:

If visibility can be used, please see the code snippet.

p.pricespan:nth-child(n+2) {display:none;}

p.price {
  visibility: hidden;
}

p.price > span > span {
  visibility: visible;
}

<pclass="price"><spanclass="wcpbc-price wcpbc-price-1357"data-product-id="1357"><spanclass="woocommerce-Price-amount amount"><spanclass="woocommerce-Price-currencySymbol">CHF</span>
      120.95
    </span>
    " - "
    <spanclass="woocommerce-Price-amount amount"><spanclass="woocommerce-Price-currencySymbol">CHF</span>
      152.95
    </span></span></p>